Линейные разрывы между divs создают пространство. Как устранить его из HTML?

У меня есть следующий макет

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div>
    <div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

потому что в html есть строка изменения между закрывающим и открывающим div (div1 и div2), браузеры добавляют вместо символа "пробел" символ "пробела", что приводит к тому, что второй div будет отображаться под первым div.

Однако, если вы удалите \n между div1 и div2, они отображаются рядом друг с другом, что является ожидаемым поведением.

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

Однако это делает код выглядящим уродливым. В настоящее время я использую <DOCTYPE html>. Я также пытался переключиться на XHTML, но не работал. Я уверен, что есть способ устранить это поведение разрывов строк, любые идеи?

FYI: я не хочу использовать float или анализировать мой вывод html в php во время рендеринга, чтобы удалить разрывы строк.

Ответ 1

Я думаю, что единственным действительно хорошим решением является переключение div со списком

<ul style="width:100px">
    <li style="width:50%; display: inline-block;">
        div1
    </li>
    <li style="width:50%; display: inline-block;">
        div2
    </li>
</ul>

обычно "перепродажа" свойств списка сделает его похожим на div. Преимущество заключается в том, что браузеры не будут создавать пространство между <li> элементами.

Ответ 2

Еще один возможный способ - установить размер шрифта родителя равным нулю, а затем установить размер дочерних элементов шрифта на все, что вам нужно. Как:

#mybar { font-size: 0; }
#mybar span { font-size: 14px; }

Однако вы должны знать, что font-size = 0 отображается в зависимости от браузера: http://webdesign.about.com/od/fonts/qt/tipfont0.htm

Я тестировал в Firefox и работает так, как ожидалось. Если я правильно помню, минимальный размер шрифта также может быть установлен в зависимости от браузеров, поэтому он может быть несовместимым.

Ответ 3

Возможный дубликат Удаление пробелов между элементами HTML при использовании разрывов строк

Вы можете использовать стиль float:left css или просто комментировать пробелы между тегами:

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><!--
    --><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

Позже отредактируйте. Я думаю, что решение css должно установить font-size:0px; в контейнер div так:

<div style="width:100px; font-size:0px;">
    <div style="width:50%; display: inline-block; font-size:11px;">
        div1
    </div>
    <div style="width:50%; display: inline-block; font-size:11px;">
        div2
    </div>
</div>

должен решить проблему.

Посмотрите на нежелательное расстояние CSS между элементами привязки тегов

Ответ 4

Один из способов исправить это - использовать " display: table-cell" вместо "display: inline-block".

Ответ 5

Другой способ (который я иногда делаю) - удалить это пространство, контролирующее поле:

#mybar span { display: inline-block; }
#mybar span:not(:first-child) {
    margin-left: -4px; /* Adjust accordingly */
}