为什么空div移动div的内容？

我不明白为什么是空的div移动div的内容。为什么空div移动div的内容？

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 2px solid #000; 
 
    display: inline-block; 
 
}

<div>a</div> 
 
<div></div>

来源

2016-09-13 Agus Achille

空的div难以确定其基线的位置。解决方案：通过设置vertical-align属性将它们对齐。 –

您需要添加vertical-align对他们说：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 2px solid #000; 
 
    display: inline-block; 
 
    vertical-align:top; /* <-- SEE THIS? */ 
 
}

<div>a</div> 
 
<div></div>

来源

2016-09-13 19:38:20 vsync

哦，你在问题关闭后回答了问题。做得好。有一个upvote。 –

@MrLister - 感谢您对我垃圾邮件的满意。 – vsync

改变风格

div { 
width: 100px; 
height: 100px; 
background-color: red; 
border: 2px solid #000; 
float:left; 
margin:0 2px; 
}

https://jsfiddle.net/anwnacc2/

请日的jsfiddle

来源

2016-09-13 19:37:17

div { width：100px; height：100px; background-color：red; border：2px solid＃000; float：left; margin：0 2px; } 使用这种风格它会使div并排 –

为什么空div移动div的内容？

回答

相关问题