пространство между элементом встроенного блока и блочным элементом

Question

Что это за пространство между этими двумя div? Я даже удалил пробел в html.

<div id="asd"></div><div id="psd"></div> 

http://jsfiddle.net/9thpuvwa/

Теперь, если первый DIV (ASD) имеет некоторый текст в нем, пространство исчезает; ЧТО?

<div id="asd">a</div><div id="psd"></div> 

http://jsfiddle.net/kadb1d3s/

(я пытаюсь понять my prev question)

CSS

#asd { 
    background-color: blue; 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
} 

#psd { 
    background-color: red; 
    width: 200px; 
    height: 200px; 
} 

Вопрос: Где это пространство приходит?

Answer 1

Это, по-видимому, вызвано вертикальным выравниванием. Если он установлен в inline-block, по умолчанию для вертикального выравнивания установлено значение baseline, которое немного выше поднято (вероятно, для учета таких символов, как «y» и «g», которые опускаются ниже линии).

vertical-align из top кажется исправить:

#asd { 
    ... 
    vertical-align: top; 
} 

JSFiddle demo.

Answer 2

Откуда это место?

От inline-block элемент, выровненный по линии «baseline» линии, отображается.

Добавить vertical-align:bottom (или text-bottom или middle или top, ...) к нему, а пространство пропадут: http://jsfiddle.net/9thpuvwa/2/