Inline element inside inline-block div

Question

Can't get my head around on why <img> inside <div style="display: inline-block"> pushes that div lower from top?

HTML

<div id="wrapper">
        <div id="a1">
            <img src='...' alt=""/>
        </div>
        <div id="a2">
        </div>
        <div id="a3">
        </div>
        <div id="a4">
        </div>
        <div id="a5">
        </div>
        <div id="a6">
        </div>
        <div id="a7">
        </div>
        <div id="a8">
        </div>
</div>

CSS

div > div {
    background: red;
    height: 200px;
    width: 19%;
    text-align: center;
    margin: 0 5% 5% 0;
    display: inline-block;
}

img {
    height: 128px;
    width: 128px;
    display: /* "BLOCK" FIXES THE ISSUE */; 
}

EDIT

Setting img to display: block fixes the issue. But could anyone explain me why there is such a behaviour without that display: block?

Just add ``vertical-align: top;`` to your ``div > div`` in your CSS file. — Jérémy Halin, Jan 15 '16 at 14:45

score 5 · Answer 1 · edited May 23 '17 at 10:27

5

The img tag behaves like a inline and bock element, basead on this answer: Is <img> element block level or inline level?

That's why you have to display block on the img inside a div with inline-block.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 15 '16 at 14:53

Daniel Semblano

185
1
7

score 5 · Accepted Answer · answered Jan 15 '16 at 15:04

The default vertical-align value is baseline, it can be the bottom line of the text or the bottom line of an image (img element is a replaced element, inline* level), which causes the offset in the first row of your demo.

In order to fix it, you can set vertical-align to top, or like you said set img to display: block also works.

score 2 · Answer 3 · answered Jan 15 '16 at 14:44

You can fix this by either adding a float: left or vertical-align:top

https://jsfiddle.net/foxhh0av/

div > div {
 background: red;
 height: 200px;
 width: 19%;
 text-align: center;
 margin: 0 5% 5% 0;
 display: inline-block;
  float: left;
}

img {
 height: 128px;
 width: 128px;
 display: /* "BLOCK" FIXES THE ISSUE */; 
}

<div id="wrapper">
  <div id="a1">
   <img src='http://dfsm9194vna0o.cloudfront.net/1471693-0-Washingmachineforlaundry128.png' alt=""/>
  </div>
  <div id="a2">
  </div>
  <div id="a3">
  </div>
  <div id="a4">
  </div>

  <div id="a5">
  </div>
  <div id="a6">
  </div>
  <div id="a7">
  </div>
  <div id="a8">
  </div>
 
</div>

score 1 · Answer 4 · answered Jan 15 '16 at 14:43

1

Just change this in your css:

img {
  height: 128px;
  width: 128px;
  display: block; 
}

That should fix it.

answered Jan 15 '16 at 14:43

Chris G

787
6
20

Thank you. I've found that "block" fixes this. But could you please explain me, why there is such a behaviour without "display: block"? – Edgar Jan 15 '16 at 14:44

score 1 · Answer 5 · answered Jan 15 '16 at 14:46

1

You could set vertical-align: top; to your child divs (div > div).

answered Jan 15 '16 at 14:46

Julian

121
3
9

Thank you! Could you please explain me why there is such a behaviour without that `v-a: top`? – Edgar Jan 15 '16 at 14:54
1

The `vertical-align: top;` says that the top of the element is at the top of the parent-element. Example: The content of the child-divs has a different height, their top edge would be at the same height (default value is `baseline`). – Julian Jan 15 '16 at 15:02

Inline element inside inline-block div

5 Answers5