CODEWITHSUNDEEP
htmlnavigationhtml-listscss-floatcss
Phill Collins
Phill Collins

Reputation: 183

Creating a navigation - inline-block or float?

When I try to create a navigation with inline-block, I get 4px to the right of each list item.

When I do it by floating each list item, it works fine.

Is there a reason the first option is applying that 4px? I have set EVERYTHING to have a margin of 0px and padding of 0px, I don't understand it. Even Firebug reports it as having 0, yet the gap is still there.

Thanks

Upvotes: 2

Views: 674

Answers (1)

Robert Koritnik
Robert Koritnik

Reputation: 105091

Yes, space is by design and should be

Is there a reason for that? Yes it is. What got added is actually a word space. The same as if you'd have two lines of text. Browsers put a space between texts in separate lines so last words don't touch first words of the next line:

<p>
  This is my text that's in two lines
  inside my HTML source.
</p>

There would be a usual word space between lines and inside so text gets correctly displayed in browser:

This is my text that's in two lines inside my HTML source.

The same happens in your case, because your elements are inline. Your navigation elements are listed one per line in HTML source hence a word break gets added between them.

How to avoid excessive spaces between elements?

There are basically 3 approaches to mitigate this problem. All of them work on the premise to put all elements in the same line as seen by the HTML renderer:

  1. Put all elements unspaced in a single line:

    <ul>
    <li>First</li><li>Second</li>...<li>Last</li>
</ul>

    This one actually puts all elements in one line which may make it harder for people to manipulate these elements. If every LI would have an anchor tag inside (with a long link), this line gets too long to handle.

  2. Comment-out line breaks:

    <ul><!--
    --><li>First</li><!--
    --><li>Second</li><!--
    ...
    --><li>Last</li><!--
--></ul>

  3. Make tags break the line:

    <ul
   ><li>First</li
   ><li>Second</li
    ...
   ><li>Last</li
></ul>

    This one is least obtrusive to the eye but may seem confusing to beginners hence other team members (if you work in such environment) may feel tempted to put tag ends back to where they were originally (and usually are). They may feel these were broken by error.

The result of all three of them can be seen in this JSFiddle example.

Pick the one that suits you best. I usually use commenting because it's least distracting in my development editor because comments are very subtle.

Upvotes: 5

Related Questions