Inline element

Question

Hello I wanted to clear a doubt because an element <a> inline does not work a padding-top

a {
    padding-top: 80px;
    background-color: #2c3e50;
    text-transform: none;
    color: white;
}

Answer 1

Usa display: inline-block; and the anchor will already respect this padding-top.

a {
	display: inline-block;
    padding-top: 80px;
    background-color: #2c3e50;
    color: white;
    text-transform: none;
}

<div>
    <a href="">Foo</a>
    <a href="">Bar</a>
</div>

The reason it doesn’t work is because the element has display: inline; and elements inline do not respect padding as is expected. By definition the a is a inline element. There’s an old article about it here^{In English}. In that article it says "While padding can be Applied to all Sides of an inline element, only left and right padding will have an Effect on surrounding content.", that is only the side padding is respected.

Examples:

Without changing the display: https://jsfiddle.net/mnj85kp2/
With display: inline-block;: https://jsfiddle.net/mnj85kp2/1/