gpt4 book ai didi

HTML5 文档类型导致 SPAN 标签在顶部和底部之间有一个特殊的间隙

转载 作者:太空狗 更新时间:2023-10-29 12:35:46 25 4
gpt4 key购买 nike

以下示例使用 HTML 4.01 Transitional doctype 声明,span 不会在顶部和底部之间获得特殊间隙。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="background:red"><span>dark green</span></div>
</body>
</html>

CSS

span {
background: yellow;
color: black;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: normal;
}

但如果我们将其更改为使用 HTML5 声明 <!DOCTYPE html> , span 会得到特殊的间隙。

这是 jsfiddle 中的整个示例(如果您将 Fiddle Options 的 DTD 更改为使用 HTML5,您将在那里看到问题。

最佳答案

这与如何在 div 元素上计算“行高”有关。将 div 元素的“行高”设置为与跨度相同的“字体大小”是解决此问题的一种方法。喜欢this :

div { line-height: 12px; }

严格(和 HTML5)DOCTYPE seem to enforce “行高”就好像它是“最小高度”一样。即使元素中没有任何文本,仍会应用“行高”。

Transitional DOCTYPE 在浏览器中触发“Almost Standards”模式,基本上是 standards mode with a few quirks .

This page解释“几乎标准”模式下行高计算的行为:

Inline elements contribute to line height if and only if one of the following is true.

If the element:

  • Contains text characters
  • Has a nonzero border width
  • Has a nonzero margin
  • Has a nonzero padding
  • Has a background image
  • Has vertical-align set to a value other than baseline

Note that a line break is not considered a text character for this definition unless it is the only content of a line box. In that case, the line box height remains the uppermost inline box top and the lowermost inline box bottom on the line, regardless of the specified line height.

If an img element is the sole content of a table cell, the line box height of the cell line box height is adjusted to zero.

关于HTML5 文档类型导致 SPAN 标签在顶部和底部之间有一个特殊的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17181708/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com