html – padding-top不工作

前端之家收集整理的这篇文章主要介绍了html – padding-top不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
为什么padding-top不工作? div的高度被设置。

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)应用边距。

看一看:

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

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

所以这将解决你的问题:

.menu a{
    margin-top: 10px;
    display:inline-block;
}

猜你在找的HTML相关文章