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

CSS, HTML, Вопросы и ответы
27 февраля 2012

Вопрос

Есть следующий 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>

Пример:

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

Нет комментариев

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


(обязательно)