内联块 div 内的内联元素答案

【问题标题】：Inline element inside inline-block div内联块 div 内的内联元素
【发布时间】：2016-04-21 04:34:59
【问题描述】：

我不明白为什么<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会有这样的行为？

【问题讨论】：

只需将 vertical-align: top; 添加到 CSS 文件中的 div > div 即可。

标签： html css

【解决方案1】：

vertical-align默认值是baseline，可以是文字的底线，也可以是图片的底线（img元素是replaced element，inline* level），导致偏移在演示的第一行。

为了修复它，您可以将vertical-align 设置为top，或者像您说的将img 设置为display: block 也可以。

【讨论】：

【解决方案2】：

img 标签的行为类似于内联和块元素，基于以下答案：Is <img> element block level or inline level?

这就是为什么你必须在带有 inline-block 的 div 内的 img 上显示块。

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

只需在您的 css 中更改：

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

这应该可以解决它。

【讨论】：

谢谢。我发现“阻止”解决了这个问题。但是请您解释一下，为什么没有“显示：阻止”会有这样的行为？

【解决方案5】：

您可以将vertical-align: top; 设置为您的子 div (div > div)。

【讨论】：

谢谢！你能解释一下为什么没有v-a: top会有这样的行为吗？
vertical-align: top; 表示元素的顶部位于父元素的顶部。示例：子 div 的内容具有不同的高度，它们的顶部边缘将处于相同高度（默认值为 baseline）。