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

Answer 1

此问题称为Margin Collapse，有时会在块元素的top和bottom边距之间发生。

相邻兄弟姐妹的边缘崩溃

这就是为什么保证金不适用于p标签。要使其在此处工作，可以选择在p标记上使用padding-top。

在a标记上，边距不起作用，因为它是内联元素。您可能需要将其display属性更改为inline-block或block。

Answer 2

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

Answer 3

链接标记<a>是内联块标记，它意味着它必须在其他元素旁边的一行中，并且应该有一个父部分，父部分确定这些内联块元素应该有多少边距顶部和按键有两种方法可以做到这一点：将主题转换为块：

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

或者只是您可以使用其padding

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

Answer 5

如果没有先将其设置为<a>，您将无法在display:block;代码上设置保证金。

在你的情况下，你需要做这样的事情：

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

Answer 6

只有一个空白，而正确的问题仍然存在通过将显示更改为flex解决了它

Answer 7

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

保证金顶部不适用于<p>和<a> tag?</a> </p>

7 个答案: