CSS-de özüniň giňligi bolan bloklar bilen plitokada indentationlar

Bizde bir hatarda dört blokly plitoka bolsun:

.child {
	width: 25%;
}

Geliň bloklarymyza gönişlikde we diklikde göterimde indentationlar goşalyň:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Biz ýasan zadyňyz häzirki wagtda nädogry işleýär, sebäbi bloklaryň we indentationlaryň jemi giňligi 100%-den uly. Dogry işlemek üçin biz her bir blokdan belli bir bölegini aýyrmaly, ýagny indentationlar üçin ýer goýmaly. Geliň bu bölekleri hasaplaýalyň.

Bizim ýagdaýymyzda, dört blok bar, olaryň arasynda üç indentation - her biri bir ýarym göterim. Aýyrylan bölegi hasaplamak üçin, indentationlaryň umumy giňligini bloklaryň sanyna bölmeli:

1.5% * 3 / 4 = 1.125

Şonda her bir blokuň giňligi şuna deň bolar:

25% - 1.5% * 3 / 4 = 23.875%

Aşakdaky kod alnylar:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Bu indentationy özümiz hasaplamaly däl, ýöne işi calc funksiýasyna ýüklemek mümkin:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Blokuň giňligini hem calc funksiýasy hasaplasin:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Bloklara göterimde giňlik beriň, şeýlelikde plitokada bir hatarda üç blok bolsun, we olaryň arasyndaky aralyk 3% bolsun.

Bloklara göterimde giňlik beriň, şeýlelikde plitokada bir hatarda alty blok bolsun, we olaryň arasyndaky aralyk 0.5% bolsun.

Bloklara göterimde giňlik beriň, şeýlelikde plitokada bir hatarda dört blok bolsun, we bloklaryň arasyndaky aralyk 30px bolsun.

Bloklara göterimde giňlik beriň, şeýlelikde plitokada bir hatarda bäş blok bolsun, we bloklaryň arasyndaky aralyk 50px bolsun.