CSS'те плитка үчүн тик аралыктар

Эми дагы бир тик аралыктарды кошолу. Бул үчүн бардык туунду элементтерге margin-bottom касиетин 10px маанисинде белгилейбиз:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Көрүнүп тургандай, акыркы катар ата-эне элементинен аралыктанып турганынан сырткары, баары жакшы иштейт. Көбүнчө бул сындуу эмес.

Эки элементтен турган катар менен плитка жасаңыз, элементтердин ортосундагы аралык 20px болсун.

Үч элементтен турган катар менен плитка жасаңыз, элементтердин ортосундагы аралык 20px болсун.

Төрт элементтен турган катар менен плитка жасаңыз, элементтердин ортосундагы аралык 20px болсун.