Margin-top not working for and tag?

Question

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.

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>

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

Answer 1

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

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.

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.

Answer 2

Try this:

#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 3

You won't be able to set a margin on an <a> tag without first setting it to display:block;.

In your case, you need to do something like this:

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

Answer 4

Had the same issue only margin left and roght worked solved it by changing the display to flex

Answer 5

The <a> tag is an inline element and therefore cannot have a top or bottom margin. But you can solve this by applying display: inline-block; to it.

Answer 6

the link tag <a> is inline block tags and it means it must be in one line beside other elements and should has a parent part that the parent part determines how much these inline-block elements should have margin top and button there's two ways to do that: convert theme to block:

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

or simply you can work with its padding