Padding not working in anchor

Question

My text inside anchor is not taking padding, but padding applies when it's hovered. That's why on hover my web structure is just moving. Please help.

Solution 1

Anchor links (a elements) are inline elements, they can't have paddings. Making them inline-block must work.

Just add:

a
{
    display:inline-block;
}

Solution 2

You need to apply either display:block or display:inline-block to the anchor link

Solution 3

Anchor is an inline element so padding will work but it will not take up the space on top and bottom. Elements get overlapped. So make it inline-block or block based on your requirement.

<a href="#" style="display:block;padding:10px">Click here</a>

Solution 4

Just add this CSS display:block on your anchor tag

<a href="#" style="display:block; padding:4px ">Click here</a>

View more solutions

Comments

[GreyRoofPigeon]

Why? It also works without that: jsfiddle.net/LinkinTED/4d7q6gwp

[Susheel Singh]

it works but doesn't take up the space. add one more line and see it will overlap as it is an inline element.

[Vinith Almeida]

@LinkinTED Padding can be applied to an inline element, but only the left and right padding will have effect on the surrounding content. Check this out jsfiddle.net/vinith98/u79egvjm

[Susheel Singh]

jsfiddle.net/4d7q6gwp/2

[GreyRoofPigeon]

@VinithAlmeida: yes, that is right.

[Susheel Singh]

They can have paddings on left and right..top and bottom also it has.. but doesn't take up the space

[MoonDev]

Oh yes. I want to say that.

[Eric Brandt]

A user flagged this answer for deletion as low-quality and I am reviewing it. I am not voting to delete it, but while this code may answer the question it would be better to include some context explaining how and why it works. Code-only answers do not teach anyone anything.