CSS'те блоктуу элементтерди тегиздөө

margin касиети жөөк коюу үчүн гана эмес, блоктуу элементтерди борборлоштуруу үчүн да колдонулат. Бул үчүн оң жана сол жөөктөрдүн маанисин auto кылып коюу керек.

Төмөнкү мисалда ички блок борбордо болот:

<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;
}

Эсиңизде болсун, ушундай жол менен борборлоштуруу үчүн элемент блоктуу болушу керек, горизонталдуу жана гана туурасы белгиленген болушу керек.

Эгер биздин үстүнкү жана астынкы жөөктөр ар башка керек болсо, анда төмөнкүдөй жаза алабыз:

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

Үч маани менен да кайрадан жазууга болот: биринчиси үстүнкү жөөктү, үчүнчүсү - астынкы жөөктү берет, ал эми экинчиси оң жана сол жөөктөрдүн маанисине auto берет:

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

Баракты үлгүгө кайталаңыз, жашыл блоктор өз ата-энесинин борборунда жайгашкан кылыңыз: