Html 填充内联元素的顶部和底部

引自Head first html：

可以在内联元素的顶部和底部添加填充，但填充不会影响其周围其他内联元素的间距，因此填充将与其他内联元素重叠

a） 就我所知，在内联元素的顶部和底部添加填充对周围的元素没有任何影响，因此也不会影响页面的外观

b） 但“填充将与其他内联元素重叠”的确切含义是什么？这是否意味着在某些情况下，填充（内联元素的顶部和底部）会对页面的外观产生影响

---

thanx

填充将影响元素本身。例如，元素中的任何文本都会从其他DOM元素中得到更多填充。

尝试以下操作：

<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>

div{背景：蓝色；高度：4em；填充：1em}
span{背景：红色；填充：.5em；}
一


二

如果我理解正确，并且根据我刚才所做的：

a） 文本是一个内联元素，因此我添加带有顶部和底部填充的跨距并不会向下推其他行

b） 如您所见，由于我已将颜色添加到跨度中，因此颜色将与其他线重叠

---

我希望这是对的，并回答了您的问题：D

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

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

---

奇怪的是，内联元素的背景色（黄色）并不会隐藏元素下面一行上的文本，而会隐藏元素上面一行上的文本。为什么？@SourceC：我回答不了这么多：（我猜它可能会随着浏览器的不同而变化，但我还没有验证这一点。它从头到尾都会绘制文本。因此，它绘制了第一行，然后是内联元素的黄色背景，由于填充，它会覆盖第一行，然后是特殊内联元素的黑色文本，然后是以下几行。Ele文档对象模型的元素。基本上是任何HTML标记。内联元素不会仅从元素的左右两侧填充，而不会从其顶部或下方的元素填充？上次显示之前，

*

的内容是什么？这是一个错误吗？总之，它工作得很好。