In the case when there are no indents, everything is solved quite simply - we set the width in percent and everything is fine, all the blocks are in line. But what if you suddenly need to indent between the div?

Example: CSS

.wide{ width: 100%; background: yellow; } *{ box-sizing: border-box; } .someContent{ float: left; width: 25%; height: 50px; background: gray; border: 2px solid black; } .wrapper{ margin-left: auto; margin-right: auto; width: 70%; border: 2px dotted green; } .wrapper::after{ content:""; clear: both; display: table; }

HTML

 <div class="wide"> <div class="wrapper"> <div class="someContent">Контент</div> <div class="someContent">Контент</div> <div class="someContent">Контент</div> <div class="someContent">Контент</div> </div> </div>

If in this example you set the width as a percentage of .someContent, then the last block will be transferred.

How to implement the indents between the blocks so that the flat line and the relative equal width of each block are preserved?

    2 answers 2

    Indents also in percent try:

     .someContent{ width: 23%; margin: 0 1%; }

    DEMO https://jsfiddle.net/mg9wh3oa/

    • I thought your idea, but it seems to me that doing the enumeration of values ​​is not a very good practice, plus sometimes it is important that the indent is still fixed in size. The way is working, but it seems to me, not the only one. - Yes Man

    Try using calc ()

    Something like

     width: calc(25% - 15px);

    http://codepen.io/anon/pen/KMPamL