3

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?

1
  • Just add vertical-align: top; to your div > div in your CSS file. Commented Jan 15, 2016 at 14:45

5 Answers 5

5

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.

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.

2

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>

1

Just change this in your css:

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

That should fix it.

1
  • 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
    Commented Jan 15, 2016 at 14:44
1

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

2
  • Thank you! Could you please explain me why there is such a behaviour without that v-a: top?
    – Edgar
    Commented Jan 15, 2016 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
    Commented Jan 15, 2016 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.