If you have markup like this:
<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>
and css like this: .inlineblock{ display: inline-block; }
You will get spaces between the elements. about 4px of space. unless your markup looks like this:
<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>
Now, what i would like to know is WHY?
What is the technical reason that "good" browsers still do this, even the latest Firefox, Chrome, and Opera at the time of this posting still do this. I assume there is a technical reason behind it, otherwise it would have been fixed by now?
Thanks!
The inline-block display property treats block level elements (e.g. <div> ) as an inline element (e.g. <span> ), and, just like if you had a line break between two <span> elements, the line-break between the <div> s is creating a space between the <div> s. That extra margin is actually a space—not a margin.
So, while the default in HTML is to ignore multiple spaces and line breaks, you can override this using the <pre> tag. (X)HTML also allows the use of the non-breaking space ( ).
HTML. Approach 2: We can also eliminate the extra space using the margin-top property. The margin-top property sets the top margin of an element. When we use margin-top we have to apply it on the tag, such that we have to eliminate extra space above it.
This is exactly what they should do.
Spaces between inline elements are no different from spaces between words.
If you don't want that, use block elements, or set the font size to zero.
Well, there are spaces between them!
For a fix, try using font-size: 0
in the parent element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With