Parent Element with height auto is higher than highest child

Question

I have a strange problem with my CSS / HTML. I have a LI which contains two DIV, each 15px height: But all the browsers compute the height of the LI > 15px. Also the elements are vertically displaced. In my opionen the LI should have a height of 15px. The first DIV inside the LI is a text, and the second DIV is just there to display an background image. If you check the height with the Firefox Developer Tools, the height of each div is not higher than 15px. Can someone explain to me why this is happening ?

Just open the code below in the newest Firefox.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body style="font-size:12px;">
  <div style="min-height:500px; width:20%; margin:auto; background-color:red;">
  <ul style="background-color:green;">
  <li style="background-color:yellow;">
  <div style="display:inline-block;width:90%">li #1</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </li>
    <li style="background-color:yellow;">
  <div style="display:inline-block;width:90%">li # 2</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </li>
  </ul>
  </div>
  </body>
</html>

No additional CSS is used. If you replace the LI with DIV, it has still the same behaviour

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body style="font-size:12px;margin:0;padding:0;">
  <div style="min-height:500px; width:20%; margin:auto; background-color:red;">
  <div id="parent1">
  <div style="display:inline-block;width:90%">li #1</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </div>
  <div id="parent2">
  <div style="display:inline-block;width:90%">li # 2</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </div>

  </div>
  </body>
</html>

If I give the inner div's of the parent divs the style attribute "float:left;" everything looks as it supposed to be. I want to understand why the browser give the parent div the addiotional 4px, and make it look shitty.

If you set the height of the parent DIV to 15px, it looks how it supposed to be. But if you don't set the height, the height is 18px. How does the browser calculate 18px ? The height of each child is only 15px.

Possible duplicate of [\* { Box-sizing: border-box; } : To border-box or not to border-box all elements?](http://stackoverflow.com/questions/10722841/box-sizing-border-box-to-border-box-or-not-to-border-box-all-elements) — Marcos Pérez Gude, Nov 02 '16 at 17:23
There isn't any more CSS. Behaviour is the same in IE, Chrome and Firefox. If you check out the "computed" tab at the Developer tools and select the first div in a LI, it's height is 15px. The second div in the LI has also a height if 15px. But the LI itself has a computed height of 19px; I wrapped the content of the LIs in DIVS, and removed the UL/LI tags. The behaviour is the same as before, max height of a child DIV is 15px, but the parent DIV has a height of 19px. Only default browser CSS. None of the Browser Developer Tools (IE,Chrome,Firefox) show any padding, margin etc. — Philip Zultan, Nov 03 '16 at 06:57

zizhen zhan · Answer 1 · 2021-05-19T02:29:37.220

because inline layout has space. like:

<div style="background-color: black; width: 50px">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    <!-- there is a space here, maybe 4px or other size -->
 </div>

so the problem is how to remove inline space. There are some methods:

use font-size: 0 , which can set "space" 0 also.

<div style="background-color: black; width: 50px;font-size:0">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    </div>

make child be block. because block elment dosen't leave space.

    <div style="background-color: black; width: 50px">
      <div
        style="
          display: block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    </div>

use float(not recommended now, use flex instead)

    <div style="background-color: black; width: 50px; overflow: hidden">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
          float: left
        "
      />
    </div>

use flexbox

    <div style="background-color: black; width: 50px; display: flex">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    </div>

you can learn from below links also:

score 2 · Answer 2 · answered Nov 03 '16 at 09:00

It’s because you are making the DIVs inline-block, which means they will be laid out in the line box like any other inline element, and that means leaving space for the underlengths of potential text on the same line.

vertical-align: bottom for the DIVs will fix that.

Parent Element with height auto is higher than highest child

2 Answers2