mike mike - 5 months ago 9
CSS Question

display: inline-block extra margin

I'm working with a few

div
s that are set to
display: inline-block
and have a set
height
and
width
. In the HTML, if there is a line break after each
div
there is an automatic 5px margin add to the right and bottom of the div.

Example:

<div>Some Text</div>
<div>Some Text</div>


Is there a property that I've overlooked that will allow me to reset the automatic margin?

Update

From what I've found there is no way to remove the margin... except if you either have everything on the same line or, add comments to comment out the line breaks. example:

<div>Some Text</div><!--
--><div>Some Text</div>


Not the best solution, but still easier to read if you have multiple lines.

Answer

The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1; on the surrounding container.

Comments