Padding-top not working

Mantas Kudeikis picture Mantas Kudeikis · Jan 30, 2013 · Viewed 42.9k times · Source


Why doesn't padding-top work? The height of the div is set.

HTML:

<div class="menu">
    <a href="#">APIE MUS</a>
    <a href="#">REKLAMA</a>
    <a href="#">PARTNERIAI</a>
</div>

CSS:

 .menu {
      width: 300px;
      height: 30px;
      background: red;
 }
 .menu a {
      padding-top: 10px;
 }

Answer

gearsdigital picture gearsdigital · Jan 30, 2013

Your example (with margin) does not work because you can't apply margin to inline elements like a, span, b.

Take a look:

To fix your issue:

Just add display:inline-block;

This value (inline-block) causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. Source: http://www.w3.org/TR/CSS2/visuren.html#inline-level

So this will fix your issue:

.menu a{
    margin-top: 10px;
    display:inline-block;
}