Style boksów — odstępy i obramowanie

Poniższe właściwości są dostępne dla czterech boków każdego boksu. Boki wybiera się dodając -top (góra), -right (prawo), -bottom (dół) lub -left (lewo) do nazwy właściwości. Można też użyć skróconego zapisu podając jedną (wszystkie boki), dwie (góra/dół, boki), trzy (góra, boki, dół) lub cztery (od góry wg wskazówek zegara) właściwości na raz. 

 margin: 0 0 15px
 15 pixeli na dole, góra i boki wyzerowane

 padding: 5px 3em
 5 pixeli na górze i na dole, a 3 wysokości linii tekstu po bokach.

 padding: 5px 10px 15px 20px
 5 pixeli na górze, 10 po prawej, 15 na dole, 20 po lewej.

 border-top: 0
 Bez górnego obramowania

padding Bug w IE

padding czasem jest tłumaczony jako dopełnienie lub margines wewnętrzny

Ustala odstęp między treścią, a obramowaniem elementu. Nie odsuwa tła elementu, dzięki czemu jest przydatna do zapobiegania zasłaniania brzegów tła (obrazka) elementu przez jego tekst.

Gdzie jest padding? Zobacz BoxModel.

Górny i dolny padding na elementach inline jest widoczny, ale nie wpływa na wysokość linii tekstu. Jeśli wysokość ma się zmienić, to użyj line-height lub zmień display na np. inline-block.

Jeśli elementowi z width lub height ustawiasz padding, a chcesz, żeby wizualnie zachował te same wymiary, to musisz pomniejszyć wartość width i height o padding.

Marginesy: margin

wcięcia akapitowe robi text-indent

Marginesów używa się do kontrolowania odstępów między elementami oraz do robienia wcięć na całą wysokość elementu.

Odstępy między słowami i literami robi się przez word-spacing i letter-spacing

Można zmieniać pionowe i poziome marginesy elementów blokowych. W przypadku elementów inline widoczne będą tylko poziome marginesy.

Zapadanie się marginesów Bug w IE

Uncollapsing margins

Górne i dolne marginesy elementów blokowych zapadają (nakładają) się. Oznacza to, że ustalony margines jest minimalną odległością między danym elementem, a sąsiednimi (odstęp między górnymi/dolnymi krawędziami dwóch elementów będzie równy większemu z ich marginesów, a nie ich sumie).

Marginesy zapadają się nie tylko dla sąsiednich elementów, ale nawet jeśli jeden element jest w drugim i między marginesami nie ma obramowania, ani paddingu.

Lewe i prawe marginesy po prostu rezerwują określoną odległość z boku elementu — zapadanie ich nie dotyczy. Odległość między bokami sąsiednich elementów będzie równa sumie ich marginesów.

Zapadanie się marginesów

Na ilustracji marginesy są zaznaczone kratkowanym polem, padding kreskowany, a obramowanie kolorem. Zauważ, że zapadnięte pionowe marginesy nakładają się.

Teoria stojąca za marginesami wygląda bardzo skomplikowanie, ale w praktyce okazuje się intuicyjna i marginesy nie sprawiają większych problemów. Gdyby sprawiały, to masz do czynienia z ich zapadaniem — ustawienie border lub padding na nadrzędnym elemencie rozwiąże „problem”.

Centrowanie: margin:auto

Więcej sposobów centrowania w "Krok po kroku"

Marginesy poziome przyjmują wartość auto, która powoduje wycentrowanie całego obiektu, jeśli ma on nadaną szerokość.

Więcej możliwości wyrównania do bocznych krawędzi daje właściwość float.

Jeśli ustawione są oba, element jest centrowany. Jeśli tylko lewy jest auto, element będzie wyrównany do prawej. 

 margin: 1em auto;
 width: 50%
 Górne i dolne marginesy na wysokość jednego wiersza, a boczne marginesy automatyczne, centrujące element.

Obramowanie: border

Dzieli się na właściwości: border-color (kolor), border-style (styl) i border-width (grubość) z których każda z osobna przyjmuje skrócony (od 1 do 4) zapis parametrów w analogiczny sposób do margin/padding lub border-top, border-right, border-bottom i border-left, i samo border, które przyjmują na raz grubość, styl i kolor, w dowolnej kolejności.

Styl obramowania: border-style

solid
jednolite obramowanie
dotted
złożone z kropek Bug w IE
dashed
z kresek
double
podwójna linia
inset, outset
wgłębione i wypukłe
ridge, groove
podwójne wgłębione, podwójne wypukłe

Nie można precyzyjnie sterować odcieniami kolorów użytymi do inset, outset, ridge i groove. Dwa pierwsze style da się zastąpić przez solid i odpowiednio dobrane kolory. 

 border: 1px solid red

 Jednopixelowa czerwona ramka wokół całego elementu

 border-left: gray 2px dotted
 
 Szara dwupixelowa kropkowana lewa krawędź

 border: dashed blue; border-width: 5px 0
 
 Kreskowane niebieskie krawędzie na górze i na dole elementu (grubość 0 usuwa obramowanie). Można w ten sposób składać właściwości CSS dzięki kaskadzie.

 border: 3px solid; border-color: white black black white;
 
 Element mający wygląd wypukłego przycisku

Są też dodatkowe cechy i wartości dla obramowania komórek tabel.

Podlinkować tabele

Obwódka: outline Bug w IE

Ma składnię analogiczną do border.

Dodaje obwódkę wokół całego elementu, ale nie wpływa na jego wielkość. Jest zawsze poza nim i ew. nachodzi na elementy sąsiednie.

Jest to przydatne do wyróżnienia elementu — np. do zaznaczenia aktywnego elementu formularza czy przy tworzeniu arkuszy stylów, gdy chce się zobaczyć wielkość elementu bez burzenia precyzyjnych układów. 

 input:focus {outline: 1px solid red;}

Może być tylko jedna obwódka dla całego elementu. Nie ma właściwości jak outline-left, jest tylko jeden ogólny outline.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Wymiary | Tła
Zmodyfikowano: 27.02.2010, 17:38
submit