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

Bizde bir hatarda dört blokly plitoka bolsun:

css.child {
  width: 25%;
}

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

css.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:

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

Aşakdaky kod alnylar:

css.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:

css.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:

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