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

Question

引用 Head first html：

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

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

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

谢谢

Answer 1

改用 inline-block。 将这些属性添加到要添加填充的所有元素。 例如：

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

Answer 2

如果我理解正确，并且从我刚刚制作的示例中：

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

b) 如您所见，由于我已在跨度中添加了一种颜色，因此该颜色将与其他线条重叠。

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

Answer 3

尝试这个：

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

Answer 4

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