Margin-top not working for <p> and <a> 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

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.