Inline-block does not fit in the block, what to do?

Question

It is necessary to build blocks in one line. And their width should be 1/3 of the parent and the frame. There should be no padding between blocks. I sort of did everything right, but the third block comes out from the bottom of the new line. What is wrong I do not understand ...

.ex1 .variant1 { box-sizing: border-box; background: red; } .ex1 .variant1 .red { display: inline-block; width: 33.3%; border: solid 10px black; margin: -5px; } .ex1 .variant1 .green { display: inline-block; width: 33.3%; border: solid 10px black; margin: -5px; } .ex1 .variant1 .blue { display: inline-block; width: 33.3%; border: solid 10px black; margin: -5px; }

 <div class="ex1"> <div class="cols variant1"> <div class="red"> <h3>Погода</h3> <p>Сегодня солнечно</p> </div> <div class="green"> <h3>Курс доллара</h3> <p>1 доллар США = 30,32 рубля</p> </div> <div class="blue"> <h3>Сейчас в кино</h3> <p>Пятый элемент (2002)</p> </div> </div>

Possible duplicate question: Indentation between elements with inline-block

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2017-11-14T15:36:50

The problem is

 box-sizing: border-box;

Set to only one item.

Elements with a display:inline-block have the content-box value. This means that the size of the border will not fit into the calculated width and will come from above. Since the width of the border is quite large in comparison with the main width, the sum of the finite block sizes is more than 100% because of this transfer.

For the solution, you can set box-sizing: border-box; for all divs like so

 .ex1 div { box-sizing: border-box; } .ex1 .variant1 { box-sizing: border-box; background: red; } .ex1 .variant1 .red { display: inline-block; width: 33.3%; border: solid 10px black; } .ex1 .variant1 .green { display: inline-block; width: 33.3%; border: solid 10px black; } .ex1 .variant1 .blue { display: inline-block; width: 33.3%; border: solid 10px black; }

 <div class="ex1"> <div class="cols variant1"> <div class="red"> <h3>Погода</h3> <p>Сегодня солнечно</p> </div><!-- --><div class="green"> <h3>Курс доллара</h3> <p>1 доллар США = 30,32 рубля</p> </div><!-- --><div class="blue"> <h3>Сейчас в кино</h3> <p>Пятый элемент (2002)</p> </div> </div>

Or simply reduce the size of the border:

 .ex1 .variant1 { box-sizing: border-box; background: red; } .ex1 .variant1 .red { display: inline-block; width: 33.3%; border: solid 3px black; margin: -5px; } .ex1 .variant1 .green { display: inline-block; width: 33.3%; border: solid 3px black; margin: -5px; } .ex1 .variant1 .blue { display: inline-block; width: 33.3%; border: solid 3px black; margin: -5px; }

 <div class="ex1"> <div class="cols variant1"> <div class="red"> <h3>Погода</h3> <p>Сегодня солнечно</p> </div> <div class="green"> <h3>Курс доллара</h3> <p>1 доллар США = 30,32 рубля</p> </div> <div class="blue"> <h3>Сейчас в кино</h3> <p>Пятый элемент (2002)</p> </div> </div>

Answer 2 · 2017-11-14T15:37:59

You did not take into account the border. border is drawn from the outside so that the border is drawn from the inside box-sizing: border-box;

 .ex1 .variant1 { background: red; } .ex1 .variant1 .red { box-sizing:border-box; display: inline-block; width: 33.3%; border: solid 10px black; } .ex1 .variant1 .green { box-sizing:border-box; display: inline-block; width: 33.3%; border: solid 10px black; margin: -5px; } .ex1 .variant1 .blue { box-sizing:border-box; display: inline-block; width: 33.3%; border: solid 10px black; margin: -5px; }

 <div class="ex1"> <div class="cols variant1"> <div class="red"> <h3>Погода</h3> <p>Сегодня солнечно</p> </div> <div class="green"> <h3>Курс доллара</h3> <p>1 доллар США = 30,32 рубля</p> </div> <div class="blue"> <h3>Сейчас в кино</h3> <p>Пятый элемент (2002)</p> </div> </div>

so that the border would be drawn from the inside box-sizing: border-box;
- in css box-sizing has already been used : border-box in one place

Inline-block does not fit in the block, what to do?

2 answers 2

More articles: