html – padding-top不工作

发布时间：2020-12-14 22:28:32 所属栏目：资源来源：网络整理

导读：为什么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; } 解决方法您

为什么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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!