0

Is there a space by default for inline block elements? i think there's both margin-left and margin-bottom set to -4px (on chrome, margin-bottom is -5px). why would they want to do that? i mean because of this, while setting margin-top for the container of all these inline-block elements (each were 25%), the third element is ending up on the next line. why does this happen?

Roopendra
  • 7,674
  • 16
  • 65
  • 92
user2957214
  • 119
  • 2
  • 9

2 Answers2

2

Just comment the spaces and line breaks between the elements to avoid the unwanted margin:

<div class="inline-block-element></div><!--

--><div class="inline-block-element></div>
Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40
  • i tried margin-left: -4px. it worked. but why would adding margin/padding top affect the structure of the elements? – user2957214 Nov 19 '13 at 09:20
  • You should thing about inline-blocks elements as single words. The only difference is that they also are tags, which means they can be styled, allowing them to have a margin that actually moves them around. You could add margin to a single word, if there is a way to target only that word in the css. – Jonas Grumann Nov 19 '13 at 09:28
1

Here are two common ways to avoid the space:

  1. You can shift the tags up to avoid line breaks between elements:
<ul>
    <li>
    one</li><li>
    two</li><li>
    three</li>
</ul>
  1. Or you can comment out the line break:
<ul>
    <li>one</li><!--
    --><li>two</li><!--
    --><li>three</li>
</ul>

You get the space because there is some space between the elements (tabs and line breaks count as "spaces" ). By getting rid of the spaces between the elements, you'll fix the problem. :)
Richard Shi
  • 625
  • 1
  • 9
  • 21
Mr. iC
  • 129
  • 9