Element inline

Question

Element inline

Navigation

#1 by (2 votes)

4

Hello, I wanted to take a question because an element <a> inline does not work padding-top

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

html html5 css css3

asked by anonymous 01.05.2016 / 07:06

1 answer

city state JQuery selection error Does Xamarin generate Java source code?

score 2 · Answer 1

Uses 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 does not work is because the element has display: inline; and inline elements do not respect padding com is expected. By default, a is a inline element . There is an old article about this here in English . In this 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." , ie only side padding is respected. p>

Examples:

Without changing display : link
With display: inline-block; : link