title: Margin-top not working for <p> and <a> tag?
body: <p>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.</p>
  
  <p>There are 3 li elements, i haven't posted whole code here as it is same as first li element.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="services"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="images/service.png" alt=""/&gt;
              &lt;p class="service-heading"&gt;Service 1&lt;/p&gt;
              &lt;p&gt;Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Sit sociis. Augue tempor mid rhoncus nec nisi ac pulvinar dictumst&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt; 
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css code for the above html.
  css code:</p>
  
  <pre><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;
  }
  </code></pre>