空div和div，文本具有inline-block属性 [英] Empty div vs div with text having inline-block property

问题描述

想知道此行为的原因。

CSS

  div {
 display：inline-block; 
 margin-right：2px; 
 width：20px; 
 background-color：red; 
} 
  

清空div

 < div style =height：20px;>< / div> 
< div style =height：40px;>< / div> 
< div style =height：60px;>< / div> 
< div style =height：80px;>< / div> 
  

行为：元素从底部到顶部（高度）增加 >

div带文本

 < div style =height：20px;> 20< / div> 
< div style =height：40px;> 30< / div> 
< div style =height：60px;> 40< / div> 
< div style =height：80px;> 50< / div> 
  

行为：元素从上到下增加>

查看操作： http://jsfiddle.net/8GGYm/

解决方案

基本上，它与vertical-align：的计算方式有关。所以如果你把vertical-aling：bottom;属性，然后你会注意到它将是相同的有和没有文本。

你可以阅读此了解详情。

没有内容，在框中不绘制填充（即，当为0时，如果有内容，浏览器计算填充的位置）。所以有和没有文本计算有一点区别。

希望这是有帮助的。

Want to know the reason for this behavior.

CSS

div {
   display: inline-block;
   margin-right: 2px;
   width: 20px;
   background-color: red;
}

Empty div

<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>

behavior: element increases from bottom to top (height)

div with text

<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>

behavior: element increases from top to bottom (height)

see it in action: http://jsfiddle.net/8GGYm/

解决方案

Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.

you can read the this for more details.

When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.

Hope this is helpfull.

这篇关于空div和div，文本具有inline-block属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！