<p>和<a>标签的margin-top属性无效？

Question

我一直在尝试为链接按钮实现margin-top，但它根本不起作用。我还尝试了'p'和'a'标签的内联样式。

这里有3个li元素，我没有发布整个代码，因为它与第一个li元素相同。

HTML

<div id="services">
    <ul>
        <li>
            <img src="images/service.png" alt=""/>
            <p class="service-heading">Service 1</p>
            <p>Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Sit sociis. Augue tempor mid rhoncus nec nisi ac pulvinar dictumst</p>
            <p><a href="#">Read More</a></p> 
        </li>
    </ul>
</div>

这是上述HTML的CSS代码。 CSS代码:

#services{
    background-color: #afc1ff;
    height: 490px;
    padding: 5%;
    border-top: 5px solid #4972ff;
    border-bottom: 5px solid #4972ff;
}
 #services ul{
/*  background-color: red; */
    margin: 0;
    padding-left: 10px;
    padding: 0 0 0 50px;
}
#services ul li{
    display: inline-block;
    width: 22%;
    padding: 1%;
    margin: 0 4% 0 4%;
    color: #4c4c4c;
    font-size: 14px; font-size: 1.4rem;
    text-align: center;
} 
.service-heading{
    font-size: 18px; font-size: 1.8rem;
}
#services ul li a{
    background-color: #4972ff;
    color: #fff;
    border-bottom: 3px solid #779bff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 8px;
    margin-top: 10px;
}

- Orahmax

Answer 1

这个问题被称为外边距合并，有时会发生在块级元素的top和bottom边距之间。

相邻兄弟元素的外边距将折叠为一个较大的边距。

这就是为什么在p标签上边距不起作用。要使其在这里起作用，其中一种方法是在p标签上使用padding-top。

而在a标签上，边距无法工作，因为它是内联元素。您可能需要更改其display属性为inline-block或block。

- DaniP

---

对于那些感到困惑并且持不同意见的人，你们是正确的。编程涉及到字面解释，collapsed-margins是一种由人为引入的bug，用于在概念上暗示而不是字面上解释。然而，当完全胜任的人掌控标准时，它最终将从规范中被移除。 - John

通过谷歌搜索找到了这篇文章——我遇到了同样的问题，但是您使用的 display: inline-block 证明了它是解决方案。谢谢。 - scottperezfox

Answer 2

<a>标签是一个内联元素，因此不能具有顶部或底部边距。但是您可以通过将display: inline-block;应用于它来解决这个问题。

- Lars Beck

Answer 3

链接标签<a>是内联块级标签，意味着它必须与其他元素在同一行，并且应该有一个父元素来确定这些内联块级元素的上下边距。有两种方法可以实现这个目的：将它们转换为块级元素：

#services a{
display: block;
margin-top: 8px;
}

或者您可以直接使用其 填充(padding)

。

- Navid

Answer 4

试试这个：

#services ul li a{
    background-color: #4972ff;
    color: #fff;
    border-bottom: 3px solid #779bff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 8px;
    position: relative;
    top: 10px;
}

- luke

Answer 5

position: absolute;
/* This css code may help you.*/

- Phuri Sottatipreedawong

---

它去哪里了？ - General Grievance

Answer 6

如果没有将 <a> 标签设置为 display:block;，则无法设置其边距。

在您的情况下，您需要执行以下操作：

#services ul li p {
padding: 8px;
margin-top: 10px;}

- wickywills

Answer 7

我遇到了同样的问题，只有左右边距起作用。通过将显示方式更改为flex，解决了这个问题。

- elad BA