Box model w CSS3

Model formatowania elementów blokowych

Marginesy

Marginesy wewnętrzne: górny, prawy, dolny, lewy, właściwości skrócone
padding-top:, padding-right:, padding-bottom:, padding-left:
length \| percentage
padding:
[length \| percentage] {1,4}

Marginesy zewnętrzne: górny, prawy, dolny, lewy, właściwości skrócone
margin-top:, margin-right:, margin-bottom:, margin-left:
length \| percentage \| auto;
margin:
[length \| percentage \| auto;] {1,4}

Marginesy

Szerokość i wysokość

Szerokość
width:
length	percentage	auto;
np. 50px;	np. 50%;	auto;

Wysokość
height:
length	percentage np. 50%;	auto;
np. 20px;	np. 50%;	auto;

Minimalna i maksymalna wysokość i szerokość

Minimalna szerokość i wysokość
min-width:, min-height:
length	percentage
min-height: 30px;	min-height: 30%;

Maksymalna wysokość i szerokość
max-width:, max-height:
length	percentage	none;
max-width: 50px;	max-width: 50%;	max-width: none;

Wymiary

Otaczanie

Oblewanie
float:
left;	right;	none;	page-floats;*
Lorem ipsum dolor sit amet,	Lorem ipsum dolor sit amet,	Lorem ipsum dolor sit amet,	Lorem ipsum dolor sit amet,

Oblewanie
clear:
none;	left;	right;	both;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

Przycinanie

Przycinanie
overflow: {1,2}
visible;	hidden;	scroll;	auto;	no-display;	no-content;
Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,

Szablon strony

Przycinanie poziome*
overflow-y: overflow-x:
visible;	hidden;	scroll;	auto;	no-display;	no-content;
Lorem_ipsum dolor,	Lorem_ipsum dolor,	Lorem_ipsum dolor,	Lorem_ipsum dolor,	Lorem_ipsum dolor,	Lorem_ipsum dolor,

Przycinanie pionowe*
overflow-y:
visible;	hidden;	scroll;	auto;	no-display;	no-content;
Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,	Lorem ipsum dolor,

Widzialność, Typy bloków

Widzialność
visibility:
visible;	hidden;	collapse;
Lorem	Lorem	Lorem

Wyświetlanie
display:
inline;	block;	none;	inline-block;	run-in; ^CSS3
display: inline;	display: block;	Lorem	Lorem	Lorem

Zastosowania