保证金顶部不适用于<p>和<a>标签？

Question

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

有3个li元素,我没有在这里发布整个代码,因为它与first 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

此问题称为" 边距折叠",有时会发生在块元素之间top和bottom边距上.

相邻兄弟姐妹的边缘被折叠

这就是为什么边距不适用于p标签.为了使它在这里工作,一个选项是padding-top在p标签上使用.

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

Answer 2

该<a>标签是一个内联元件,因此不能具有顶部或底部边缘.但你可以通过申请display: inline-block;来解决这个问题.