CSS Inline Block with LI elements

Standard

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

and

  • 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 *