Q:

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?

A:

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 */
}

