Почему блок сдвинут вверх?

Question

[Петр Петров]

Я написал такой HTML код:

<div>			
	<a href="#">Xhtml valid</a>
	<a href="#">Css valid</a>
</div>

И к нему вот такие стили:

div{
	width: 162px;
	height: 11px;	
}

a{		
	font-size: 8px;
}

Вроде бы всё нормально, но когда я в браузере через Firebug посмотрел содержимое блока div, то увидел это Синее — это блок div. Почему он сдвинут вверх? Больше никаких элементов на странице нет.
Все margin и padding обнулены.

Comments

[sergey]

код в jsfiddle/codepen

Answer 1

[Юрий Есин]

Потому что по умолчанию ссылки имеют свойство display: inline-block и vertical-align у них bottom. Поставьте ссылке свойство:
vertical-align: top;
или же уберите у родителя высоту, пускай будет автоматической, а ссылки выравниваются по центру высоты родителя с помощью:
vertical-align: middle;

Comments

[Вадим Кот]

Потому что по умолчанию ссылки имеют свойство display: inline-block

Серьезно? А что они делают в спецификации https://www.w3.org/TR/html5/text-level-semantics.h... в разделе text-level-semantics? Или ссылке можно задать высоту и ширину?

[Юрий Есин]

vadimkot:
1. Не совсем понял что вы хотели этим сказать. До HTML5 у тега a свойство display всегда по умолчанию инициализировалось в inline. С 5й версии - inline-block или block, в зависимости от контекста родителя.

2. Ссылке можно задать высоту или ширину, как и практически любому другому элементу, тоже не понял к чему этот вопрос.

[Стас Мельников]

Юрий Есин: Вы полностью неправильно ответили на вопрос. Про vertical-align.

Display ссылки можно в кладке Computed

[Юрий Есин]

Стас Мельников: да что вы, правда? Какого ж хрена тогда всё, что я написал про vertical-align работает на практике?

[Вадим Кот]

Юрий Есин:

Какого ж хрена тогда всё, что я написал про vertical-align работает на практике?

Да потому что vertical-align отработал на двух инлайновых элементах (ссылках)

До HTML5 у тега a свойство display всегда по умолчанию инициализировалось в inline. С 5й версии - inline-block или block, в зависимости от контекста родителя.

Я вам давал ссылку на спецификацию html5. Ссылка всегда имеет display: inline, пока его не поменять на другое значение.

Ссылке можно задать высоту или ширину, как и практически любому другому элементу, тоже не понял к чему этот вопрос.

Сами то пробовали задавать ссылке высоту и ширину, не меняя значение display на block или inline-block?

Answer 2

[Николай Самарин]

Как дополнение.
Подобная проблема со сдвигом блоков, в основном появляются отступы сверху, наблюдается и при работе с Notepad++
если не выбрать кодировку Кодировка в UTF-8 (без BOM)