Uitlyning van Blokelemente in CSS

Die eienskap margin word nie net gebruik vir die instelling van spasies nie, maar ook vir die sentrering van blokelemente. Om dit te doen, moet die regter en linker spasie op die waarde auto gestel word.

In die voorbeeld hieronder sal die innerlike blok in die middel wees:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

Hou in gedagte dat jy slegs blokelemente op hierdie manier kan sentreer, slegs horisontaal en slegs as 'n breedte daarvoor gespesifiseer is.

As ons verskillende boonste en onderste spasies margin nodig het, kan ons so skryf:

.child {
	margin: 30px auto 10px auto;
}

Dit kan ook met drie waardes herskryf word: die eerste stel die boonste spasie, die derde stel die onderste spasie, en die tweede stel die waarde auto vir die regter en linker spasies:

.child {
	margin: 30px auto 10px;
}

Herhaal die bladsy volgens die voorbeeld, en maak dit sodat die groen blokke in die middel van hul ouer geplaas word: