CSS: как убрать промежуток между двумя элементами inline-block?

Вопрос

Есть следующий HTML:

<div>
<span class="in-line">Первый</span>
<span class="in-line">Второй</span>
</div>

И этот CSS:

.in-line {
display:inline-block;
width:100px;
}

Вот как это выглядит:

Пример
Первый
Второй

Я понимаю, почему это происходит, и что если я поставлю элементы в HTML в один ряд, то промежуток исчезнет:

<div>
<span class="in-line">Первый</span><span class="in-line">Второй</span>
</div>

Но мне не очень удобно следить за HTML-разметкой и постоянно удалять эти отступы. Поэтому я надеюсь, что в CSS есть другое, более подходящее решение этой проблемы.

Ответ №1

Задай font-size:0 (размер шрифта) родительскому контейнеру (div), а span-ам тоже задай это свойство (такое, какое вам нужно), потому что иначе они будут наследовать его от родителя и текст в них видно не будет.

<div style="font-size:0;">
<span class="in-line" style="font-size:14px;">Первый</span>
<span class="in-line" style="font-size:14px;">Второй</span>
</div>

Пример:

Пример
Первый
Второй

No responses yet

Добавить комментарий