Własności bloków

Poniższe własności odnoszą się do mediów wizualnych.

margin-top, margin-right, margin-left, margin-bottom

Wartość	`length` \| `percentage` \| `auto` \| `inherit`
Wartość początkowa	`0`
Używana z	wszystkie elementy
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego
Przykład	`H1 { margin-top: 2em }`

margin

Wartość	[ [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ]] \| `inherit`
Używana z	wszystkie elementy
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego
Przykład	`BODY { margin: 2em } BODY { margin: 1em 2em }`

Określa rozmiar górnego, prawego, dolnego i lewego marginesu, w tej kolejności. Jeśli podana jest jedna wartość, odnosi się do wszystkich boków. Jeśli dwie lub trzy, brakujące dane są określane przez wartości przeciwległych marginesów.

padding-top, padding-right, padding-bottom, padding-left

Wartość	`length` \| `percentage` \| `inherit`
Wartość początkowa	`0`
Używana z	wszystkie elementy
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego
Przykłady	`P { padding-top: 0.3em } P { padding-right: 10px } P { padding-left: 20% }`

padding

Wartość	[ [`length` \| `percentage` ] [`length` \| `percentage` ] [`length` \| `percentage` ] [`length` \| `percentage` ]] \| `inherit`
Używana z	wszystkie elementy
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego

Określa wielkość górnego, prawego, dolnego i lewego odstępu, w tej kolejności. Jeśli podana jest jedna wartość, odnosi się do wszystkich boków. Jeśli dwie lub trzy, brakujące dane są określane przez wartości przeciwległych odstępów.

border-top-width, border-right-width, border-bottom-width, border-left-width

Wartość	`thin` \| `medium` \| `thick` \| `length` \| `inherit`
Wartość początkowa	`medium`
Używana z	wszystkie elementy
Dziedziczenie	nie

Własność określa szerokość obramowania elementu.

border-width

Wartość	[`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] \| `inherit`
Używana z	wszystkie elementy
Dziedziczenie	nie

Jeśli podana jest jedna wartość, odnosi się do wszystkich obramowań. Jeśli dwie, pierwsza dotyczy góry i dołu, a druga lewego i prawego. Jeśli trzy, dotyczą one góry, boków i dołu. Dla czterech wartości, dotyczą one odpowiednio góry, prawego, dolnego i lewego.

border-color

Wartość	`color`, `color`, `color`, `color` \| `inherit`
Wartość początkowa	kolor elementu
Używana z	wszystkie elementy
Dziedziczenie	nie

Własność określa kolor czterech części obramowania. Liczba podanych wartości działa tak samo jak w przypadku border-width.

border-top-style, border-right-style, border-bottom-style, border-left-style

Wartość	`none` \| `dotted` \| `dashed` \| `solid` \| `double` \| `groove` \| `ridge` \| `inset` \| `outset \| inherit`
Wartość początkowa	`none`
Używana z	wszystkie elementy
Dziedziczenie	nie

Wartości są określane podobnie jak w przypadku border-width. Pewne wartości, które mogą nie być łatwo zrozumiałe, to solid (pojedyncza line), double (podwójna linia) oraz groove, ridge, inset i outset, które tworzą efekty 3D.

border-style

Wartość	[do 4 typów stylów obramowania] \| `inherit`
Wartość początkowa	`none`
Używana z	wszystkie elementy
Dziedziczenie	nie

border-top, border-left, border-bottom, border-right

Wartość	`border-xxx-width` \|\| `border-style` \|\| `color`
Używana z	wszystkie elementy
Dziedziczenie	nie

Określa wygląd obramowania z konkretej strony.

border

Wartość	`border-width` \|\| `border-style` \|\| `color`
Używana z	wszystkie elementy
Dziedziczenie	nie

Własność 'border' jest skrótem dla ustaleń dotyczących szerokości, koloru i stylu wszystkich czterech obramowań elementu.

width

Wartość	`length` \| `percentage` \| `auto` \| `inherit`
Wartość początkowa	auto
Używana z	elementy blokowe
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego

Ustala szerokość elementu, skalując go w razie potrzeby.

min-width

Wartość	`length` \| `percentage` \| `inherit`
Używana z	elementy nietabelaryczne
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego

Określa dozwolone minimum szerokości dla elementu.

max-width

Wartość	`length` \| `percentage` \| `none` \| `inherit`
Wartość początkowa	`none`
Używana z	elementy nietabelaryczne
Dziedziczenie	nie
Wartości procentowe	zależne od szerokości elementu nadrzędnego

Określa dozwolone maksimum szerokości dla elementu.

height

Wartość	`length` \| `auto` \| `inherit`
Wartość początkowa	`auto`
Używana z	elementy blokowe
Dziedziczenie	nie

Określa wysokość elementu.

min-height

Wartość	`length` \| `inherit`
Wartość początkowa	`0`
Używana z	elementy nietabelaryczne
Dziedziczenie	nie
Wartości procentowe	zależne od wysokości elementu nadrzędnego

Określa minimalną dozwoloną wysokość elementu.

max-height

Wartość	`length` \| `percentage` \| `none` \| `inherit`
Wartość początkowa	`none`
Używana z	elementy nietabelaryczne
Dziedziczenie	nie
Wartości procentowe	zależne od wysokości elementu nadrzędnego

Określa maksymalną dozwoloną wysokość elementu.

float

Wartość	`none` \| `left` \| `right` \| `inherit`
Wartość początkowa	`none`
Używana z	wszystkie elementy
Dziedziczenie	nie
Przykład	`IMG { float: left;}`

Przesuwa element w jednym kierunku, oblewając go tekstem.

clear

Wartość	`none` \| `left` \| `right` \| `both` \| `inherit`
Wartość początkowa	`none`
Używana z	wszystkie elementy
Dziedziczenie	nie

Własność wylicza boki, gdzie elementy opływające nie są dozwolone.

position

Wartość	`static` \| `relative` \| `absolute` \| `fixed` \| `inherit`
Wartość początkowa	`static`
Używana z	wszystkie zwykłe elementy
Dziedziczenie	nie

Wartością jest jedna z listy:

static : Wartość normalna. left i top są ignorowane.
relative : Obiekt jest przesuwany ze swojej normalnej pozycji, a inne obiekty są wyświetlane tak, jak gdyby nie był przesunięty.
absolute : Pozycja i wielkość obiektu jest zdeterminowana przez własności left, right, top, i bottom, które są określone w odniesieniu do obiektu, w którym element jest zawarty.
fixed : Tak samo jak absolute, ale element jest umocowywany w odniesieniu do elementu z którego jest przywoływany. Na ekranie element nie porusza się przy przewijaniu. W mediach stronicowych jest umocowany w odniesieniu do strony.

top, left, bottom, right

Wartość	`length` \| `percentage` \| `auto` \| `inherit`
Wartość początkowa	`auto`
Używana z	wszystkie niestatyczne elementy
Dziedziczenie	nie

z-index

Wartość	`integer` \| `auto` \| `inherit`
Wartość początkowa	`auto`
Używana z	wszystkie niestatyczne elementy
Dziedziczenie	nie

CSS2 obsługuje warstwicowanie elementów, a własność ta pozwala określić, jak wysoko znajduje się element, gdy znajduje się w stosie innych elementów.

Wartość całkowita to poziom w kontekście danego stosu, chyba że jest to zero, w którym to przypadku dotyczy lokalnego kontekstu. Wyższe liczby oznaczają położenie bliżej wierzchu. Przy Auto poziom jest ten sam, jak w zawierającym go elemencie.

Wszystkie elementy są przezroczyste, chyba że jest określone tło.

direction

Wartość	`ltr` \| `rtl` \| `inherit`
Wartość początkowa	`ltr`
Używana z	wszystkie elementy
Dziedziczenie	tak

Pozwala określić kierunek wyświetlania tekstu : left-to-right lub right-to-left. Wpływa także na kierunek wyświetlania kolumn w tabelach.

Aby zmienić tekst w elementach typu inline, wartość własności unicode-bidi musi być ustawiona na embed lub override.

unicode-bidi

Wartość	`normal` \| `embed` \| `bidi-override` \| `inherit`
Wartość początkowa	`normal`
Używana z	wszystkie elementy
Dziedziczenie	nie

embed : Dla elementów inline pozwala, aby kierunek tekstu był określony przez własność 'direction'.
bidi-override : Dla elementów inline lub blokowych wymusza pierwszeństwo, z kierunkiem wyświetlania określonym przez własność direction.

line-height

Wartość	`normal` \| `number` \| `length` \| `percentage` \| `inherit`
Wartość początkowa	`normal`
Wartości procentowe	zależne od wielkości czcionki dla elementu
Używana z	wszystkie elementy
Dziedziczenie	tak

vertical-align

Wartość	`baseline` \| `sub` \| `super` \| `top` \| `text-top` \| `middle` \| `botom` \| `text-bottom` \| `length` \| `percentage` \| `inherit`
Wartość początkowa	`baseline`
Wartości procentowe	zależne od wysokości linii dla elementu
Używana z	elementy inline i komórki tabeli
Dziedziczenie	nie

Niektóre ze specjalnych wartości obejmują:

baseline : wyrównuje linię bazową elementu z linią bazową rodzica
sub, super : tworzy subskrypty i superskrypty
text-top, text-bottom : wyrównuje górę/dół elementu z górą/dołem jego rodzica
percentage, length : wartość dodatnia podnosi element o podaną odległość

overflow

Wartość	`visible` \| `hidden` \| `scroll` \| `auto` \| `inherit`
Wartość początkowa	`visible`
Używana z	elementy blokowe
Dziedziczenie	nie

Niekiedy zawartość elementu jest zbyt szeroka w stosunku do przydzielonej mu przestrzeni. Własność mówi, co ma być zrobione w tej sytuacji: uczynić ją widoczną visible poza przydzielonym miejscem, ukryć wystające części hidden, uczynić widoczną przez użycie suwaków scroll, czy też zostawić programowi decyzję automatyczną (zwykle pojawiają się suwaki).

clip

Wartość	`shape` \| `auto` \| `inherit`
Wartość początkowa	`auto`
Używana z	block elements
Dziedziczenie	nie

Własność kadrowania określa, jaka część elementu jest widoczna, jeśli jest zbyt duży, aby zmieścił się w przydzielonej przestrzeni.

CSS2 dopuszcza tylko jedną wartość dla shape :

rect (top right bottom left). Każdy wymiar to albo auto albo length i określa odstęp od każdego boku "skrzynki".

visibility

Wartość	`visible` \| `hidden` \| `collapse` \| `inherit`
Wartość początkowa	`inherit`
Używana z	wszystkie elementy
Dziedziczenie	nie

Własność definiuje, czy element ma być wyświetlany, nawet jeśli jest dla niego miejsce. collapse powinno być używane jedynie w wierszach i kolumnach tabeli; inaczej jest to 'hidden'.