# 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

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-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ę `auto`matyczną (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'.