title: Anchor Tag (which is inline by default) not respecting margin bottom property of immediate neighbor above it. Why is that?
body: <p>Simple fiddle : <a href="https://jsfiddle.net/7frtbhpg/12/" rel="nofollow noreferrer">https://jsfiddle.net/7frtbhpg/12/</a></p>
  <p>Above is a very simple landing page (without using display:flex). The a tag is styled as a button :</p>
  <pre><code>#showcase a {
          /* display: inline-block; */
          margin-top:20px;
          color: #fff;
          text-decoration: none;
          background-color: #28a745;
          padding: 13px 40px;
          border-radius: 10px;
        }
  </code></pre>
  <p>I noticed that once i comment out the display:inline-block property of the 'a' tag, then it is respecting its padding and not respecting its margin-top property which is expected.</p>
  <p>But additionally it is also not respecting the margin-bottom property of the element just above it. Why is that ?</p>
  <p>Edit :  the padding of 'a' tag was overlapping with the margin-bottom of the element above it .So it gave the impression that the margin-bottom property is not working, but it actually is working because the 'a' tag moves down once the margin-bottom is increased.</p>