Question

无法理解为什么<img>内<div style="display: inline-block">推动div从顶部降低？

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 */; 
}

修改

将img设置为display: block可解决此问题。但有人可以解释为什么没有display: block会有这种行为吗？

Answer 1

img标记的行为类似于内联和bock元素，基于这个答案：Is <img> element block level or inline level?

这就是为什么你必须在div中使用inline-block在img上显示块。< / p>

Answer 2

默认vertical-align值为baseline，它可以是文字的底线或图片的底行（img元素是replaced element，{ {3}}），它会导致演示的第一行出现偏移。

为了解决此问题，您可以将vertical-align设置为top，或者像您说的那样img设置为display: block也可以。

Answer 3

您可以通过添加float: left或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>

Answer 4

只需在你的css中更改：

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

那应该解决它。

Answer 5

您可以将vertical-align: top;设置为您的子div（div＆gt; div）。

内联块div内的内联元素

5 个答案: