Specyfikacja CSS 1. Podrozdział 5.5. Własności bloków, model blokowy CSS

Własności bloków służą do określania rozmiarów, obwodu i pozycjonowania elementów blokowych. W rozdziale 4 znajdują się przykłady użycia własności bloków.

Własności marginesów służą do określania marginesów elementów. Aby ustawić wszystkie marginesy na raz należy użyć własności margin. Marginesy z poszczególnych stron elementu ustawiane są przy pomocy bardziej precyzyjnych własności marginesów.

Własność padding służy do określania wielkości odstępu pomiędzy krawędziami elementu a jego zawartością. Aby ustawić wszystkie marginesy wewnętrzne (dopełnienie) na raz należy użyć własności padding. Dopełnienie pomiędzy treścią i poszczególnymi krawędziami elementu ustawiane jest przy pomocy bardziej precyzyjnych własności.

Własność border służy do kontrolowania wyglądu krawędzi elementu. Każdy element posiada cztery krawędzie (jedna z każdej strony), które posiadają następujące właściwości: szerokość (width), kolor (color) oraz styl (style).

Własności width i height służą do określania rozmiarów bloku. Własności float i clear służą natomiast do pozycjonowania elementów na stronie.

5.5.1 margin-top

Wartości: <length> | <percentage> | auto
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność ta służy do ustawiania marginesu górnego:

H1 { margin-top: 2em }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.2 margin-right

Własność ta służy do ustawiania prawego marginesu:

H1 { margin-right: 12.3% }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.3 margin-bottom

Własność ta służy do ustawiania marginesu dolnego:

H1 { margin-bottom: 3px }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.4 margin-left

Własność ta służy do ustawiania lewego marginesu:

H1 { margin-right: 2em }

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.5 margin

Wartości: [ <length> | <percentage> | auto ]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność margin jest własnością zbiorczą służącą do określania wartości następujących własności: margin-top, margin-right, margin-bottom oraz margin-left w jednym miejscu.

Jeżeli określone zostały wszystkie cztery wartości, to odnoszą się one odpowiednio do marginesów: górnego, prawego, dolnego i lewego. Jeżeli jest tylka jedna wartość, to ma ona zastosowanie do wszystkich stron. Jeżeli określone są tylko dwie lub trzy wartości, to brakujące wartości dobierane są z przeciwnych stron.

BODY {margin: 2em} /* wszystkie marginesy będą miały wartość 2em */
BODY {margin: 1em 2em} /* margines górny i dolny = 1em, prawy i lewy = 2em */
BODY {margin: 1em 2em 3em} /* górny=1em, prawy=2em, dolny=3em, lewy=2em */

Ostatnia reguła jest równoznaczna z następującym zapisem:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em; /* wartość skopiowana od  strony prawej */
}

Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.

5.5.6 padding-top

Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność ta służy do określania górnego dopełnienia.

BLOCKQUOTE { padding-top: 0.3em }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.7 padding-right

Własność ta służy do określania dopełnienia prawego.

BLOCKQUOTE { padding-right: 10px }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.8 padding-bottom

Własność ta służy do określania dolnego dopełnienia.

BLOCKQUOTE { padding-bottom: 2em }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.9 padding-left

Własność ta służy do określania dopełnienia lewego.

BLOCKQUOTE { padding-left: 20% }

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.10 padding

Wartości: [ <length> | <percentage> ]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka

Własność padding jest własnością zbiorczą służącą do określania wartości następujących własności: padding-top, padding-right, padding-bottom oraz padding-left w jednym miejscu.

Jeżeli określone zostały wszystkie cztery wartości, to odnoszą się one odpowiednio do dopełnienia: górnego, prawego, dolnego i lewego. Jeżeli jest tylka jedna wartość, to ma ona zastosowanie do wszystkich stron. Jeżeli określone są tylko dwie lub trzy wartości, to brakujące wartości dobierane są z przeciwnych stron.

Obszar zajmowany przez dopełnienie przyjmuje tło ustawione za pomocą własności background:

H1 {
  background: white;
  padding: 1em 2em;
}

Powyższy przykład ustawia dopełnienie górne i dolne na 1em oraz prawe i lewe na 2em. Jednostka em jest zależna od rozmiaru czcionki: wartość 1em równa się rozmiarowi używanej czcionki.

Dopełnienie nie może przyjmować wartości ujemnych.

5.5.11 border-top-width

Wartości: thin | medium | thick | <length>
Wartość domyślna: medium
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność border-top-width służy do określania szerokości górnej krawędzi elementu.Szerokość jaka zostanie zastosowana po użyciu słów kluczowych jest uzależniona od klienta, ale przy zachowaniu następującej zasady: thin <= medium <= thick.

Wartości przypisane słowom kluczowym są takie same dla całego dokumentu.

H1 { border: solid thick red }
P  { border: solid thick blue }

Powyższy przykład spowoduje, że zarówno elementy H1 jak i elementy P będą mieć takie samo obramowanie bez względu na rozmiar użytej czcionki. W celu uzależnienia szerokości obramowania od czcionki można użyć jednostek em:

H1 { border: solid 0.5em }

Wartości krawędzi nie mogą być ujemne.

5.5.12 border-right-width

Wartości: thin | medium | thick | <length>
Wartość domyślna: medium
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania szerokości prawej krawędzi elementu. W razie jej braku szerokość prawej krawędzi jest taka sama jak krawędzi górnej.

5.5.13 border-bottom-width

Wartości: thin | medium | thick | <length>
Wartość domyślna: medium
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania szerokości dolnej krawędzi elementu. W razie jej braku szerokość dolnej krawędzi jest taka sama jak krawędzi górnej.

5.5.14 border-left-width

Wartości: thin | medium | thick | <length>
Wartość domyślna: medium
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania szerokości lewej krawędzi elementu. W razie jej braku szerokość lewej krawędzi jest taka sama jak krawędzi górnej.

5.5.15 border-width

Wartości: [thin | medium | thick | <length>]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta jest własnością zbiorczą służącą do ustawiania wartości następujących własności: border-width-top, border-width-right, border-width-bottom oraz border-width-left w jednym miejscu.

Możliwe jest użycie od jednej do czterech wartości:

jedna wartość: wszystkie cztery krawędzie przyjmą tę samą szerokość
dwie wartości: szerokość krawędzi górnej i dolnej przyjmą wartość pierwszą, a krawędzie lewa i prawa drugą
trzy wartości: krawędź górna przyjmuje pierwszą wartość, krawędzie lewa i prawa przyjmują wartość drugą, a trzecia wartość zostaje dla krawędzi dolnej
cztery wartości: każda z nich jest dopasowywana do odpowiednich krawędzi w następującej kolejności: góra, prawa, dół oraz lewa

Komentarze w poniższym przykładzie odpowiadają wartościom jakie przybiorą poszczególne krawędzie w kolejności: góra, prawa, dół, lewa:

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */

Szerokość krawędzi nie może być wartością ujemną.

5.5.16 border-color

Wartości: <color>{1,4}
Wartość domyślna: wartośćwłasności color
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność border-color służy do określania koloru wszystkich czterech krawędzi. Własność ta może przyjmować od jednej do czterech wartości. Zasady dopasowywania wartości do odpowiednich krawędzi są takie same jak dla własności border-width.

Jeżeli nie zostanie określony kolor krawędzi, to przyjmą one kolor określony przez wartość własności color elementu.

P {
  color: black;
  background: white;
  border: solid;
}

Powyższy przykład spowoduje, że obramowanie elementu będzie reprezentowane w postaci czarnej linii ciągłej.

5.5.17 border-style

#xy34 { border-style: solid dotted }

Powyższy przykład spowoduje, że krawędzie poziome elementu będą liniami ciągłymi (solid),a krawędzie pionowe kropkowanymi (dotted).

Ze względu na fakt, że wartością domyślną własności border-style jest none, krawędzie nie będą widoczne dopóki nie zostanie ustalona inna wartość dla tej własności.

Znaczenie poszczególnych wartości dostępnych dla własności border-style jest następujące:

none: Brak krawędzi (bez względu na własność border-width).
dotted: Krawędź jest linią przerywaną, złożoną z kropek, stykającą się z miejscem gdzie kończy się tło.
dashed: Krawędź stanowi linia przerywana złożona z kresek, stykająca się z miejscem gdzie kończy się tło.
solid: Krawędź stanowi linia ciągła.
double: Krawędź stanowi podwójna linia, stykająca się z miejscem gdzie kończy się tło. Suma szerokości poszczególnych linii oraz przestrzeni między nimi równa jest wartości własności <border-width>.
groove: Trójwymiarowe zagłębienie o kolorze określonym przez własność <color>
ridge: Trójwymiarowy grzbiet o kolorze określonym przez Własność <color>
inset: Tworzy wrażenie, że zawartość elementu jest zapadnięta. Kolor krawędzi określony jest przez własność <color>.
outset: Tworzy wrażenie, że zawartość elementu jest wypchnięta. Kolor krawędzi określony jest przez własność <color>.

CSS core: Aplikacja kliencka może potraktować każdą z wartości: dotted, dashed, double, groove, ridge, inset oraz outset jako solid

5.5.18 border-top

Wartości: <border-top-width> || <border-style> || <color>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do ustawiania szerokości, stylu i koloru górnej krawędzi elementu.

H1 { border-bottom: thick solid red }

Powyższa reguła ustawia szerokość, styl i kolor dolnej krawędzi elementu H1. Własności pominięte przybiorą wartości domyślne:

H1 { border-bottom: thick solid }

Jako że nie ustalono koloru obramowania, to przyjmie ono taki sam kolor jaki określa wartość parametru color elementu.

Warto również pamiętać, że w odróżnieniu od własności border-style, która może przyjmować maksymalnie do czterech wartości, ta własność ogranicza się tylko do jednej wartości stylu.

5.5.19 border-right

Wartości: <border-right-width> || <border-style> || <color>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru prawej krawędzi elementu. Pod pozostałymi względami jest ona równoznaczna z własnością border-top.

5.5.20 border-bottom

Wartości: <border-bottom-width> || <border-style> || <color>
Wartość domyślna: brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru dolnej krawędzi elementu. Pod pozostałymi względami jest ona równoznaczna z własnością border-top.

5.5.21 border-left

Wartości: <border-left-width> || <border-style> || <color>
Wartość domyślna: brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru lewej krawędzi elementu. Pod pozostałymi względami jest ona równoznaczna z border-top.

5.5.22 border

Wartości: <border-width> || <border-style> || <color>
Wartość domyślna: brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jest to własność zbiorcza służąca do kontrolowania szerokości, stylu i koloru wszystkich krawędzi elementu. Na przykład pierwsza deklaracja w poniższym przykładzie wywoła taki sam efekt jak wszystkie pozostałe razem wzięte.

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

W przeciwieństwie do własności zbiorczych margin i padding, za pomocą własności border nie można ustawić innych wartości dla każdej krawędzi. W tym celu należy zastosować jedną lub więcej z pozostałych własności krawędzi.

W związku z tym, że przy użyciu własności krawędzi mogą zachodzić pewne konflikty, ważne jest w jakiej kolejności zostaną one wpisane:

BLOCKQUOTE {
  border-color: red;
  border-left: double
  color: black;
}

Powyższy przykład spowoduje, że lewa krawędź będzie czarna, a pozostałe krawędzie będą czerwone. Dzieje się tak dlatego, że własność border-left ustawia szerokość, styl i kolor lewej krawędzi, a wartość własności color, jeżeli nie zostanie zdefiniowana, jest zastępowana przez wartość własności color elementu. Fakt, że własność color elementu została wpisana dopiero po border-left nie ma tutaj znaczenia.

Godne zauważenia jest to, że własność border umożliwia ustawienie tylko jednego rozmiaru dla wszystkich krawędzi w przeciwieństwie do własności border-width.

5.2.23 width

Wartości: <length> | <percentage> | auto
Wartość domyślna: auto
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: odnoszą się do szerokości elementu rodzica

Własność ta może być stosowana do elementów tekstowych, ale najbardziej przydaje się do elementów osadzonych, takich jak obrazy. W razie potrzeby obraz jest przeskalowywany, aby dopasować się do rozmiarów określonych przez wartość tej własności. Współczynnik kształtu obrazu jest zachowany jeżeli wartość własności height zostanie ustawiona na auto.

Przykład:

IMG.icon { width: 100px }

Jeżeli zarówno własność height jak i width zostaną ustawione na auto, to wymiary elementu zostaną takie same jak jego wymiary własne.

Wartości ujemne nie są dozwolone.

Zależności pomiędzy tą własnością, a własnościami marginesów i dopełnienia wyjaśnione zostały w rozdziale 4.

5.5.24 height

Wartości: <length> | auto
Wartość domyślna: auto
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Przykład:

IMG.icon { height: 100px }

Jeżeli zarówno własność width jak i height zostaną ustawione na auto, to wymiary elementu zostaną takie same jak jego wymiary własne.

W przypadku elementów tekstowych wysokość elementu może być wymuszona przy pomocy np. paska przewijania.

Wartości ujemne nie są dozwolone.

CSS core: Aplikacje klienckie mogą ignorować (np. traktować jako auto) wartość własności height jeżeli zostanie ona zastosowana do elementu innego niż element osadzony.

5.5.25 float

Wartości: left | right | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Jeżeli wartością własności float jest none, to element zostanie wyświetlony tam gdzie go umieszczono w dokumencie. Przy zastosowaniu wartości left lub right element zostanie wyrównany do odpowiedniej strony, a sąsiadujący z nim tekst będzie go otaczał z odpowiedniej strony. Przy zastosowaniu wartości left lub right element traktowany jest jako element blokowy (tj. własność display jest ignorowana). Więcej szczegółów na ten temat znajduje się w rozdziale 4.1.4.

IMG.icon {
  float: left;
  margin-left: 0;
}

Powyższy przykład spowoduje, że wszystkie elementy IMG z klasą icon zostaną umieszczone wzdłuż lewej krawędzi elementu rodzica.

Własność ta najczęściej stosowana jest do obrazów będących elementami śródliniowymi, ale może być także stosowana dla elementów zawierających tekst.

5.5.26 clear

Wartości: none | left | right | both
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta określa, czy i po której stronie elementu mogą znajdować się elementy pływające. Mówiąc dokładniej, wartości tej własności wskazują te strony, po których elementy pływające występować nie mogą. Zastosowanie wartości left spowoduje przesunięcie elementu poniżej wszystkich elementów pływających do lewej. Przy wartości none elementy pływające mogą znajdować się po obu stronach elementu.

Przykład:

H1 { clear: left }

Wstecz Spis treści Dalej

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.