为什么div不适合基于嵌套跨度高度的高度

我刚刚发现了一个我无法理解的问题。为什么这个div比嵌套跨度大？我认为div适合其内容。为什么div不适合基于嵌套跨度高度的高度

div { 
 
    border: 1px solid black; 
 
} 
 

 
span { 
 
    font-size: 9px; 
 
    border: 1px solid black; 
 
}

<div> 
 
    <span>This is test label</span> 
 
</div>

来源

2015-07-09 Behnil

什么是div的父元素？我也看不到字体大小以外的其他字体的大小。 – L4zl0w

添加display: table-cell到span标签。 div没有这样的行为，它可以自动完全符合孩子的内容。

div { 
 
    border: 1px solid black; 
 
} 
 

 
span { 
 
    font-size: 9px; 
 
    border: 1px solid black; 
 
    display: table-cell; 
 
}

<div> 
 
    <span>This is test label</span> 
 
</div>

如果你想div还的宽度符合该span的宽度，增加display: table-cell到div标签。

来源

2015-07-09 22:09:16

你能解释为什么在span上添加'display：table-cell'会强制外部div高度与该跨度相匹配吗？ – Behnil

@Behnil显示：表格单元格不会强制外部div匹配跨度的高度，而是跨度匹配div的高度。 display：table-cell使跨度表现得像一个td标记，它填充了div的高度，因为你的标记只有一个单元格。如果一个表格只有一个单元格，则不管表格（div）有多长时间，该单元格都将填充表格的高度。 –

但是，当您运行我的代码段和代码段时，可以看到跨度高度相同。另一方面，在你的例子中，div变小了。我很困惑。 – Behnil

看起来，当字体缩小时，父div保留了它最初加载的行高，将div的行高设置为与font-size相同，并添加了一个额外的像素，并对齐跨越垂直上方，它会做的伎俩：

div { 
 
    border: 1px solid black; 
 
    line-height: 10px; 
 
    } 
 

 
span { 
 
    font-size: 9px; 
 
    vertical-align: top; 
 
    border: 1px solid black; 
 

 
}

<div> 
 
    <span>This is test label</span> 
 
</div>

来源

2015-07-09 22:14:50 KAD

为什么div不适合基于嵌套跨度高度的高度

回答

相关问题