Why display=inline-block adds uncontrollable vertical margins

Question

I'm trying to fiddle my problem on http://jsfiddle.net and have got strangest behaviour there. Can you please explain where these (http://jsfiddle.net/C6V3S/) vertical margins come from? Does appear on jsfiddle.net (at least in Chrome and FF), do not appear when copy/pasting to local standalone file ...

works OK afer changing to simple block

Sample for standalone test file: .btn { padding: 0px; border: 1px solid red; display: inline-block; }

.txt {     display: inline-block;     width: 12px;     height: 12px;     border: none;     padding: 0;     margin: 0;     background: #77FF77; } </style>  <div class="btn"><div class="txt"></div></div> 

Answer 1

When you make the .txt element inline-block, it is taken into the text flow of the parent .btn element. At that point, the line-height of .btn kicks in, which is larger than the height of the .txt element.

So, add .btn {line-height: 10px;} (for example) and your problem is fixed. I saw you already tried to influence the line-height of the inner .txt element, so you were pretty close with your attempts. Adjusting the font-size would work as well, since the default line-height is formula-based on the font-size. Anyway, the key is to do that on the parent element, not the child element.

You don't have this problem when you make the inner element a block, because then there's no text-like content, so there's no line-height applied at all.

Answer 2

inline-block is brilliant and convenient for so many cases. But they come with one annoying pitfall: unnecessary whitespace. As you're nesting an inline-block within an inline-block, that results in a white-space disaster. You can read all about whitespace and inline-blocks on David Walsh's blog.

There are many ways to handle this, but my favorite (and most widely supported) solution is setting this to the parent inline-block element:

.btn {   font-size: 0; } 

Here is an example of before/after: http://jsfiddle.net/C6V3S/1/