Встроенный блок и пиксель внизу

Question

У меня есть простой div с дисплеем: встроенный блок; и обернуть его. Он отображается в нижней части содержимого. Вы знаете, почему и как избавиться от него?

Вот проблема проверить: http://jsfiddle.net/8S8aH/

HTML:

<div class="wrap"> 
    <div id="content"></div> 
</div> 

CSS:

body{ 
    margin:0; 
} 
.wrap { 
    text-align: center; 
    background:red; 
} 
#content { 
    margin:0px auto; 
    text-align:left; 
    width:250px; height:100px; 
    display: inline-block; 
    background:whiteSmoke; 
} 

Answer 1

Измените значение vertical-align на #content

#content { 
    display: inline-block; 
    vertical-align: bottom; 
} 

http://jsfiddle.net/8S8aH/4/

Answer 2

display: block Используйте для содержимого DIV

#content { 
    margin:0px auto; 
    text-align:left; 
    width:250px; 
    height:100px; 
    display: block; 
    background:whiteSmoke; 
} 

JS Fiddle Demo

Answer 3

Лично я предпочитаю это, чтобы освободить место в inline-block элементов.

Demo

#content:after{ 
    content:'\00a0'; 
} 

Есть alternatives, а также.