CODEWITHSUNDEEP
htmlcsshtml-listspadding
aliasbody
aliasbody

Reputation: 836

Padding won't fill the <li> and <div> interly

I am trying to create a simple menu bar with 40px of height and fill 80% of the browser width.

The problem here is that I am trying to center the text, but when looking at it using different colors (one for the div, another for the ul, and another for the li), I see a small pixel not filled by the padding of the <a>.

The only solution to fill it is to make the padding at 10.35px instead of 10px or 11px.

The HTML: 

<html>
  <head>
      <meta charset="utf-8" />
      <title>myWebSite</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head> 
  <body>
      <div id="menu">
          <ul>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
          </ul>
      </div>
  </body>
</html>

And the CSS :

body, html {
    width               : 100%;
    margin              : 0;
}

#menu {
    background-color    : black;
    width               : 100%;
    height              : 40px;
}

ul {
    list-style          : none;
    height              : 100%; 
    background-color    : yellowgreen;
}

li {
    margin              : 0;
    padding             : 0;
    float               : left;
    line-height         : 40px; 
    background-color    : blue;
}

a {
    margin              : 0;
    text-decoration     : none;
    color               : white;
    font-weight         : bold;
    padding             : 10px 5px;
    background-color    : blueviolet; 
}

a:hover {
    background-color    : orange;
}

Can anyone explain me why is this happening and what better solution should I use to do this ?

Upvotes: 0

Views: 688

Answers (4)

ed1nh0
ed1nh0

Reputation: 1592

first of all I think you're setting a lot of unnecessary background colors. May I suggest you set the right ones? If I understood what you want, just set them for the div #menu and for the links (<a>).

Now your problem is that you forgot to set your links as blocks. Use display: block for them. Do that and adjust the paddings correctly. Thus there is no need to set the line-height for the list items.

As a tip of best practices, don't set the height for the <ul>. Use a clearfix method to naturally fit the height of its child elements.

As a diagnosis for your code, a final advice is, there is no need to set margin and padding for <li> and margin for <a>.

Upvotes: 0

bob
bob

Reputation: 993

By forcing the < a> tags to display as a block level element they will fill their container.

In this case I've also commented out the padding to stop and overflow outside the < li> elements. 

a {
    display: block;
    /*padding             : 10px 5px;*/

    margin              : 0;
    text-decoration     : none;
    color               : white;
    font-weight         : bold;
    background-color    : blueviolet; 
}

Upvotes: 1

j08691
j08691

Reputation: 207881

Remove the top and bottom padding on your links and use this CSS:

a {
    margin : 0;
    text-decoration : none;
    color : white;
    font-weight : bold;
    padding : 0px 5px;
    background-color : blueviolet;
    display:block;
    height:40px;
}

jsFiddle example

Upvotes: 0

smistry
smistry

Reputation: 1126

add display:block to a element and then take off the vertical padding. http://jsfiddle.net/L8dpB/

Upvotes: 1

Related Questions