Box model

Každý element na stránce je obdélník. Ten má čtyři vrstvy: obsah, padding, border a margin.

Vrstvy budeme přidávat jednu po druhé na kartě s akcí. V náhledu vidíte, kam se dostaneme.

Vrstva · 1

Obsah

Uprostřed je obsah: text, obrázek, další elementy. Karty mají pozadí, abychom viděli, kde končí. Zatím je text nalepený až na okraj.

Vrstva · 2

`padding`

Prostor mezi obsahem a borderem. Pozadí karty sahá i pod něj, takže karta vypadá větší a text dýchá.

Vrstva · 3

`border`

Čára kolem paddingu. Zapisuje se třemi hodnotami: tloušťka, styl a barva.

Místo solid zkuste dashed (čárkovaný) nebo dotted (tečkovaný).

Vrstva · 4

`margin`

Prostor za borderem. Odsouvá od karty všechno okolo. Karty se už nedotýkají.

margin je vždy průhledný, pozadí pod něj nesahá. Svislé marginy dvou elementů pod sebou se nesčítají: z 24 px a 24 px vznikne mezera 24 px, ne 48 px.

Zápis

Jedna, dvě, nebo čtyři hodnoty

padding i margin mají čtyři strany. Podle počtu hodnot víte, která patří kam.

Čtyři hodnoty jdou po směru hodinových ručiček, od dvanácti. Jednu stranu nastavíte i zvlášť: padding-left, margin-top a podobně.

Past

Šířka 300 px, a přesto širší

Kartě nastavíme šířku 300 px. Na obrazovce ale bude mít 368 px. Proč?

Ve výchozím stavu platí width jen pro obsah. Přičte se padding (2 × 32 px) a border (2 × 2 px): 300 + 64 + 4 = 368 px.

Řešení

`box-sizing: border-box`

S touto hodnotou platí šířka pro celou kartu včetně paddingu a borderu. Nastavíte 300 px, máte 300 px. Obsah se zúží sám.

Hvězdička vybere všechny elementy. Toto pravidlo patří na začátek každého stylu, počítání pak přestane překvapovat.

Responzivita

Na telefonu méně vzduchu

Na úzké obrazovce je každý pixel drahý. Padding i mezeru mezi kartami zmenšíme a karta dostane celou šířku.

width: auto vrátí výchozí chování: blok vyplní šířku rodiče. Border zůstal 2 px, ten se zmenšovat nemusí.

Shrnutí

Čtyři vrstvy

obsah: text a další elementy
padding: vzduch uvnitř, pod pozadím
border: čára kolem
margin: odstup od sousedů, vždy průhledný
box-sizing: border-box na začátek každého stylu

Box model si prohlédnete v každém prohlížeči: klávesa F12, tab Elements a vpravo Computed. Vrstvy jsou tam nakreslené barevně.

Další: Display →