Image disrupts div positions

Question

I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.

Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background: black;
}
div {
  display: inline-block;
  width: 300px;
  height: 70px;
}
div.wrapper {
  width: 900px;
  height: 100px;
  margin: 0 auto;
  background: red;
  display: block;
  font-size: 0;
}
div.div1 {
  background: green;
}
div.div2 {
  background: blue;
}
div.div3 {
  background: yellow;
}
div.div4 {
  display: block;
  width: 900px;
  height: 30px;
  background: grey;
}

<body>
  <div class="wrapper">
    <div class="div1">
      <img src="" width="25px" height="25px">
    </div>
    <div class="div2">b</div>
    <div class="div3">c</div>
    <div class="div4">d</div>
  </div>
</body>

why cant you try float:left and display:block instead of inline-block? http://jsfiddle.net/yh4zm580/ — G.L.P, Mar 24 '15 at 09:22
I can, thank you. Though I'm still wondering why image affects inline-block elements like that — Rokin, Mar 24 '15 at 09:37

score 0 · Answer 1 · edited May 23 '17 at 12:28

There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?

Honestly, instead of solving those, i would adress this issue with floats:

* {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        background: black;
    }
    div {
        /*display: inline-block;*/ /* Not necessary when using floats! */
        width: 300px;
        height: 70px;
    }
    div.wrapper {
        width: 900px;
        height: 100px;
        margin: 0 auto;
        background: red;
        display: block;
        font-size: 0;
    }
    div.div1 {
        background: green;
        float: left; /* Added float left here */
    }
    div.div2 {
        background: blue;
        float: left; /* Added float left here */
    }
    div.div3 {
        background: yellow;
        float: left; /* Added float left here */
    }
    div.div4 {
        display: block;
        width: 900px;
        height: 30px;
        background: grey;
    }

score 0 · Accepted Answer · answered Mar 24 '15 at 09:39

0

Try float:left; display:block; instead of inline-block for div's: Demo

CSS:

.div1, .div2,.div3 {
    display: block;
    float:left;
    width: 300px;
    height: 70px;
}

answered Mar 24 '15 at 09:39

G.L.P

7,119
5
25
41

Image disrupts div positions

2 Answers2