Привет.
Вопрос по хтмл. Когда пишется разметка, то используются символы форматирования - пробел, табуляция, перевод строки. Потом из этих символов форматирования получаются объекты узлы с прототипом TEXT
. Эти объекты-узлы не являются блочными или строчными элементами, так как это не лежащий в элементе текст, но они как-то отображаются. Вопрос - как отображаются эти узлы? Эти узлы не являются элементами, поэтому к ним неприменимо понятие "блочный элемент" и "строчный элемент". Как рассчитывается ширина текстового узла? Вообще об этом ни слова не встречал.
Перед тем, как отобразить, браузер строит макет страницы. При макетировании браузер вычисляет размеры и положение всего на странице перед тем, как расположить. вот меня как раз и заинтересовало, как браузер считает размеры и положение строковых узлов.
Вот пример:
<style>
span{
display:inline-block;
width:50px;
height:50px;
background-color:red;
}
</style>
<div>
<span>qwe</span>
<span>asd</span>
<span>zxc</span>
</div>
Получаю это:
Маргины спанам я не задавал.
Эту фигню можно победить тремя способами:
писать в одну строку без пробелов и энтэров.
удалить узлы текстовые джаваскриптом.
задать диву-контейнеру font-size:0px, а спану - нужный font-size, например 12px