顶部填充无法正常工作 [英] Padding-top not working
问题描述
padding-top
为什么不起作用?设置div
的高度.
Why doesn't padding-top
work? The height of the div
is set.
HTML:
<div class="menu">
<a href="#">APIE MUS</a>
<a href="#">REKLAMA</a>
<a href="#">PARTNERIAI</a>
</div>
CSS:
.menu {
width: 300px;
height: 30px;
background: red;
}
.menu a {
padding-top: 10px;
}
推荐答案
您的示例(带有边距)不起作用,因为您无法将边距应用于诸如a, span, b
之类的内联元素.
Your example (with margin) does not work because you can't apply margin to inline elements like a, span, b
.
- http://www.webdesignfromscratch.com/html-css /css-block-and-inline/
- http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
- http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
- http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
只需添加display:inline-block;
此值(内联块)使元素生成内联级块 容器.内联块的内部被格式化为块框, 元素本身被格式化为原子内联级别框. 来源: http://www.w3. org/TR/CSS2/visuren.html#inline-level
This value (inline-block) causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. Source: http://www.w3.org/TR/CSS2/visuren.html#inline-level
因此,这将解决您的问题:
So this will fix your issue:
.menu a{
margin-top: 10px;
display:inline-block;
}
这篇关于顶部填充无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!