CSS-de plitochka üçin düşewünden aralyklar
Indi bolsa, düşewünden aralyklary hem goşalyň.
Bunun üçin ähli çagalara
margin-bottom bahasyny
10px bellenjek:
html<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>css.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;
}
Результат:
Görşümiz ýaly, iň soňky setir eňesinden aralap duran bolsa-da, ýagdaý gowy işleýär. Köpçilik ýagdaýda bu möhüm däl.
Задание 1
Elementleriň arasyndaky uzaklygy
20px bolan, bir setirde iki
elementli plitochka ýasaň.
Задание 2
Elementleriň arasyndaky uzaklygy
20px bolan, bir setirde üç
elementli plitochka ýasaň.
Задание 3
Elementleriň arasyndaky uzaklygy
20px bolan, bir setirde dört
elementli plitochka ýasaň.