填充内联元素的顶部和底部答案

【问题标题】：Padding the top and the bottom of inline element填充内联元素的顶部和底部
【发布时间】：2010-11-26 22:23:42
【问题描述】：

引自Head first html：

你可以在内联元素的顶部和底部添加内边距，但内边距不会影响它周围其他内联元素的间距，所以内边距会与其他内联元素重叠

a) 据我了解以上引用，在行内元素的顶部和底部添加填充（永远）不会对周围元素产生任何影响，从而影响页面的外观？！

b) 但是“填充将与其他内联元素重叠”到底是什么意思？它是否可能表明在某些情况下填充（内联元素的顶部和底部）会影响页面的外观？！

感谢

【问题讨论】：

标签： html css xhtml

【解决方案1】：

填充会影响元素本身。例如，元素中的任何文本都将被其他 DOM 元素填充。

【讨论】：

文档对象模型的元素。基本上任何 HTML 标签。
内联元素不会只从它的左右元素填充，而不是从它上面或下面的元素填充吗？

【解决方案2】：

试试这个：

<style type="text/css">
  div { background: blue; height: 4em; padding: 1em }
  span { background: red; padding: .5em; }
</style>

<div>
  <span>one</span>
  <br/>
  <span>two</span>
</div>

【讨论】：

【解决方案3】：

如果我理解正确，并且来自我刚刚制作的example：

a) 文本是一个内联元素，所以我添加一个带有顶部和底部填充的跨度不会将其他行向下推

b) 如您所见，由于我在 span 中添加了颜色，因此颜色会与其他线条重叠。

我希望这都是正确的，并回答你的问题：D

【讨论】：

奇怪的是，内联元素的背景颜色（黄色）并没有隐藏元素下方的文本，而是隐藏了元素上方的文本。为什么？
@SourceC：我无法回答 :( 我猜它可能会因浏览器而异，但我尚未验证。
它从头到尾绘制文本。所以它绘制了第一行，然后是内联元素的黄色背景，由于填充，它覆盖了第一行，然后是特殊内联元素的黑色文本，然后是以下几行。

【解决方案4】：

改用内联块。将这些属性添加到要添加填充的所有元素。例如：

a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}

【讨论】：

最后显示之前的*是什么意思？这是一个错误吗？无论如何，它工作得很好。