Porozumění základům výplně CSS

click fraud protection

Vyplnění CSS je jednou z vlastností CSS box model. Tato vlastnost zkratky nastavuje odsazení kolem všech čtyř stran prvku HTML. Výplň CSS lze použít téměř na všechny Značka HTML (kromě některých značek tabulky). Všechny čtyři strany prvku mohou mít navíc jinou hodnotu.

Vlastnost odsazení CSS

Chcete-li použít vlastnost zkratky CSS, můžete použít mnemotechniku ​​„TRouBLe“ (nebo „TRiBbLe“ pro fanoušky Star Treku). To znamená horní, že jo, dno, a vlevo, odjet, a odkazuje na pořadí šířek výplně, které nastavíte ve vlastnosti zkratky. Například:

výplň: vpravo nahoře dole vlevo;
polstrování: 1px 2px 3px 6px;

Pokud jste použili výše uvedené hodnoty, použije se na každou stranu libovolného prvku HTML, na který jej aplikujete, jinou hodnotu výplně. Chcete-li použít stejné polstrování na všechny čtyři strany, můžete své zjednodušit CSS a stačí napsat jednu hodnotu:

polstrování: 12px;

S touto řadou CSS by se na všechny 4 strany prvku vztahovalo 12 pixelů odsazení.

Pokud chcete, aby výplň byla stejná pro horní a dolní a levou a pravou stranu, můžete napsat dvě hodnoty:

instagram viewer
polstrování: 24px 48px;

První hodnota (24 pixelů) by platila pro horní a dolní část, zatímco druhá by platila pro levou a pravou stranu.

Pokud napíšete tři hodnoty, bude vodorovná výplň (levá a pravá) stejná při změně horní a dolní části:

polstrování: nahoře vpravo a vlevo dole;
polstrování: 0px 1px 3px;

Podle CSS box modelu je odsazení nejblíže samotnému prvku / obsahu. To znamená, že výplň se přidá k prvku mezi šířkou nebo výškou obsahu a jakýmikoli hodnotami ohraničení, které používáte. Pokud je výplň nastavena na nulu, má stejnou hranu jako obsah.

Hodnoty odsazení CSS

Výplň CSS může mít jakoukoli nezápornou hodnotu délky. Určete měření, například px nebo em. Můžete také určit procento výplně, což bude procento šířky bloku obsahujícího prvek. To zahrnuje horní a spodní polstrování. Například:

#container {width: 800px; výška: 200px; }
#container p {width: 400px; výška: 75%; výplň: 25% 0; }

The výška odstavce uvnitř #kontejner prvek bude 75% #kontejnerVýška plus 25% šířky pro horní polstrování a 25% šířky pro spodní polstrování. To činí celkem 300 + 200 + 200 = 700 pixelů.

Účinky přidání výplně CSS

Na prvky na úrovni bloku, polstrování se aplikuje na čtyři strany. Protože prvek je již blokem nebo rámečkem, vycpávka se aplikuje na strany rámečku.

Když se do CSS přidá odsazení vložené prvky, může dojít k určitému překrývání prvků nad a pod vloženým prvkem, pokud svislá výplň přesahuje výšku čáry, ale nebude tlačit výšku čáry dolů. Vodorovná výplň CSS použitá na vložené prvky bude přidána na začátek prvku a na konec prvku. A polstrování může obalit čáry. Ale nebude se vztahovat na všechny řádky víceřádkového prvku, takže k odsazení segmentu víceřádkového vloženého obsahu nelze použít odsazení.

V CSS2.1 také nemůžete vytvářet bloky kontejnerů, kde šířka závisí na prvku s procenty pro šířky (nebo šířky výplně). Pokud to uděláte, výsledek není definován. Prohlížeče budou i nadále zobrazovat obsah, ale možná nedosáhnete očekávaných výsledků. Pokud o tom přemýšlíte, dává to smysl, jako by váš kontejnerový prvek potřeboval znát šířku svých podřízených prvků, aby mohl definovat svou šířku - například když nemá předdefinovanou šířku a jeden nebo více má šířku nastavenou jako procento prvku kontejneru, nastaví se kruhový řetěz bez Odpovědět. Pokud používáte procenta pro šířky čehokoli v dokumentu, měli byste se ujistit, že jsou definovány také šířky nadřazeného prvku.

instagram story viewer