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 wyzerowanepadding: 5px 3em
5 pixeli na górze i na dole, a 3 wysokości linii tekstu po bokach.border-top: 0
Bez górnego obramowania
padding
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
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.

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
- 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 elementuborder-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
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 elementy 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ę.
Zmodyfikowano: 26.05.2007, 03:45