CODEWITHSUNDEEP
htmlcsslayoutinlinepadding
futlib
futlib

Reputation: 8408

div element not respecting an inline list's padding

I'm using an inline list, and I noticed that that the div on the next line won't respect its padding (i.e. it is drawn right through the li elements' border). Is there anything I can do about that?

<html>
  <head>
    <style type="text/css">
      ul {
        margin: 0;
        padding: 0;
      }

      li {
        display: inline;
        list-style-type: none;
        padding: 10px;
        border: 1px solid gray;
      }

      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Hello</li>
      <li>World</li>
    </ul>
    <div>
      Hello, World!
    </div>
  </body>
</html>

Upvotes: 1

Views: 2232

Answers (2)

Arun
Arun

Reputation: 3077

For the li, specify display: inline-block; instead of just inline

Upvotes: 0

David Tang
David Tang

Reputation: 93674

Inline elements are not affected by top and bottom padding (see why).

Instead you can make them inline-block:

li {
   display: inline-block;
   zoom: 1; /* for IE */
   *display: inline; /* for IE */
}

Upvotes: 2

Related Questions