CSS Inline Block with LI elements


Just a really short post today with a very frustrating issue I have come across several times. When you use a list with LI elements in HTML and apply the inline-block display property to them, a 4 pixel margin is auto created on the right of each element.

To get around this, you need to eliminate the whitespace between the


  • tags in your code, so the markup would look like this:

    1. <ul>
    2. <li>
    3. <p>One</p>
    4. </li><li>
    5. <p>Two</p>
    6. </li>
    7. </ul>

    Apparently it has to do with inline-block being whitespace sensitive with LI elements. All I know is it’s a quirky thing to have to do, but it gets rid of those pesky “ghost” margins!


  • Leave a Reply

    Your email address will not be published. Required fields are marked *