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ątkowa0
Używana zwszystkie elementy
Dziedziczenie nie
Wartości procentowezależ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 zwszystkie elementy
Dziedziczenienie
Wartości procentowezależ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ątkowa0
Używana zwszystkie elementy
Dziedziczenienie
Wartości procentowezależ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 zwszystkie elementy
Dziedziczenienie
Wartości procentowezależ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ątkowamedium
Używana zwszystkie elementy
Dziedziczenienie
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 zwszystkie elementy
Dziedziczenienie
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ątkowakolor elementu
Używana zwszystkie elementy
Dziedziczenienie

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 zwszystkie elementy
Dziedziczenienie

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 zwszystkie elementy
Dziedziczenienie

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 zwszystkie elementy
Dziedziczenienie

Określa wygląd obramowania z konkretej strony.

border

Wartośćborder-width || border-style || color
Używana zwszystkie elementy
Dziedziczenienie

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ątkowaauto
Używana zelementy blokowe
Dziedziczenienie
Wartości procentowezależne od szerokości elementu nadrzędnego

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

min-width

Wartośćlength | percentage | inherit
Używana zelementy nietabelaryczne
Dziedziczenienie
Wartości procentowezależne od szerokości elementu nadrzędnego

Określa dozwolone minimum szerokości dla elementu.

max-width

Wartośćlength | percentage | none | inherit
Wartość początkowanone
Używana zelementy nietabelaryczne
Dziedziczenienie
Wartości procentowezależne od szerokości elementu nadrzędnego

Określa dozwolone maksimum szerokości dla elementu.

height

Wartośćlength | auto | inherit
Wartość początkowaauto
Używana zelementy blokowe
Dziedziczenienie

Określa wysokość elementu.

min-height

Wartośćlength | inherit
Wartość początkowa0
Używana zelementy nietabelaryczne
Dziedziczenienie
Wartości procentowezależne od wysokości elementu nadrzędnego

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

max-height

Wartośćlength | percentage | none | inherit
Wartość początkowanone
Używana zelementy nietabelaryczne
Dziedziczenienie
Wartości procentowezależ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 zwszystkie elementy
Dziedziczenienie
PrzykładIMG { float: left;}

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

clear

Wartośćnone | left | right | both | inherit
Wartość początkowa none
Używana zwszystkie elementy
Dziedziczenienie
Własność wylicza boki, gdzie elementy opływające nie są dozwolone.

position

Wartośćstatic | relative | absolute | fixed | inherit
Wartość początkowastatic
Używana zwszystkie zwykłe elementy
Dziedziczenienie
Wartością jest jedna z listy:

top, left, bottom, right

Wartośćlength | percentage | auto | inherit
Wartość początkowaauto
Używana zwszystkie niestatyczne elementy
Dziedziczenienie

z-index

Wartośćinteger | auto | inherit
Wartość początkowaauto
Używana zwszystkie niestatyczne elementy
Dziedziczenienie
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ątkowaltr
Używana zwszystkie elementy
Dziedziczenietak
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ątkowanormal
Używana zwszystkie elementy
Dziedziczenienie

line-height

Wartośćnormal | number | length | percentage | inherit
Wartość początkowanormal
Wartości procentowezależne od wielkości czcionki dla elementu
Używana zwszystkie elementy
Dziedziczenietak

vertical-align

Wartośćbaseline | sub | super | top | text-top | middle | botom | text-bottom | length | percentage | inherit
Wartość początkowabaseline
Wartości procentowezależne od wysokości linii dla elementu
Używana zelementy inline i komórki tabeli
Dziedziczenienie
Niektóre ze specjalnych wartości obejmują:

overflow

Wartośćvisible | hidden | scroll | auto | inherit
Wartość początkowavisible
Używana zelementy blokowe
Dziedziczenienie
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ątkowaauto
Używana zblock elements
Dziedziczenienie
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 :

visibility

Wartośćvisible | hidden | collapse | inherit
Wartość początkowainherit
Używana zwszystkie elementy
Dziedziczenienie

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'.