In this instance, your div
elements have been changed from block
level elements to inline
elements. A typical characteristic of inline
elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)
There are a few solutions that can be used to solve this.
Method 1 – Remove the whitespace from the markup
Example 1 – Comment the whitespace out: (example)
<div>text</div><!-- --><div>text</div><!-- --><div>text</div><!-- --><div>text</div><!-- --><div>text</div>
Example 2 – Remove the line breaks: (example)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Example 3 – Close part of the tag on the next line (example)
<div>text</div ><div>text</div ><div>text</div ><div>text</div ><div>text</div>
Example 4 – Close the entire tag on the next line: (example)
<div>text </div><div>text </div><div>text </div><div>text </div><div>text </div>
Method 2 – Reset the font-size
Since the whitespace between the inline
elements is determined by the font-size
, you could simply reset the font-size
to 0
, and thus remove the space between the elements.
Just set font-size: 0
on the parent elements, and then declare a new font-size
for the children elements. This works, as demonstrated here (example)
#parent { font-size: 0; } #child { font-size: 16px; }
This method works pretty well, as it doesn’t require a change in the markup; however, it doesn’t work if the child element’s font-size
is declared using em
units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline
elements.
Method 3 – Set the parent element to display: flex
In some cases, you can also set the display
of the parent element to flex
. (example)
This effectively removes the spaces between the elements in supported browsers. Don’t forget to add appropriate vendor prefixes for additional support.
.parent { display: flex; } .parent > div { display: inline-block; padding: 1em; border: 2px solid #f00; }
Sides notes:
It is incredibly unreliable to use negative margins to remove the space between inline
elements. Please don’t use negative margins if there are other, more optimal, solutions.