mike mike - 1 year ago 88
CSS Question

display: inline-block extra margin

I'm working with a few

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


<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?


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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download