保证金上限不适用于< p>和< a>标签? [英] Margin-top not working for <p> and <a> tag?

问题描述

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

I have been trying to implement margin-top for a link button but it doesn't work at all. I have also tried inline styles for both 'p' and 'a' tag.

有3个li元素，因为与第一个li元素相同，所以我在这里没有发布完整的代码.

There are 3 li elements, i haven't posted whole code here as it is same as first li element.

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代码:

Here is the css code for the above html. css code:

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

推荐答案

此问题称为边距崩溃，有时发生在块元素的top和bottom边距之间.

This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements.

相邻兄弟姐妹的页边空白

The margins of adjacent siblings are collapsed

这就是为什么空白在p标签上不起作用的原因.要使其在此处工作，一种选择是在p标签上使用padding-top.

That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag.

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

And on the a tag the margin doesn't work because it's an inline element. You may need to change its display property to inline-block or block.

这篇关于保证金上限不适用于< p>和< a>标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！