CODEWITHSUNDEEP
htmlcss
dtc
dtc

Reputation: 10296

How to properly pad an HTML link?

I have this html and css code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div.container{
                border: 1px solid #F00;
            }
            a.padded
            {
                font-size: 14px;
                font-weight: bold;
                text-decoration: none;
                background-color: #F0F0F0;
                border: 1px solid #666666;
                padding: 15px;
                margin: 10px;
                border-radius: 5px;
                box-shadow: #CCC 2px 2px 2px;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <a href="#" class="padded">my padded link</a>
        </div>
        <div>Some other content</div>
    </body>
</html>

I was expecting the padded link to be contained in it's parent DIV block where the DIV would expand to whatever height of the padded link. However it seems the link padding is ignored by the DIV and everything else on the page.

Why does this happen and how do I properly pad a link?

Upvotes: 2

Views: 391

Answers (3)

Bialecki
Bialecki

Reputation: 31041

Because I've asked myself this question recently, this article is a big help as to why this is happening. The relevant bit is:

The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.

Upvotes: 1

Ibu
Ibu

Reputation: 43810

What you need to do is, give your anchor tag an display:block property.

a.padded {
   display: block;
   /* display:inline-block; should 
      work too but is not supported in some version of IE */
}

Upvotes: 2

Steve Robbins
Steve Robbins

Reputation: 13812

Anchor tags are inline objects.

Add display: inline-block; to .padded. and it should work.

http://jsfiddle.net/6h7MY/

Upvotes: 2

Related Questions