Home/ Questions/Q 6157569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T20:48:30+00:00

I have this html and css code: <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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