Как избавиться от пространства между divs при отображении встроенного блока и уложить горизонтально?

У меня есть три div, горизонтально уложенные друг на друга друг с другом, и эти divs установлены для отображения: inline-block. Тем не менее, я заметил, что даже с использованием какого-то CSS reset они создают небольшое расстояние в 4 пикселя между собой? Почему это происходит? Есть ли способ глобально избавиться от этого от происходящего или просто мне нужно сдвинуть divs влево на -4px?

Ответ 1

Это вызвано тем фактом, что ваш браузер будет отображать DIV inline и как со словами, они разделены пробелами.

Ширина пространства определяется размером шрифта, поэтому простой трюк заключается в том, чтобы установить размер шрифта вашего содержащего элемента равным 0, а затем reset размер шрифта в ваших встроенных div.

#container {   font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

Я продемонстрировал это в этом Fiddle.

Посмотрите на статью для получения дополнительной информации.

Ответ 2

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

http://jsfiddle.net/eeRFC/ - с пробелами

<div>test</div>
<div>test</div>
<div>test</div>

http://jsfiddle.net/eeRFC/1/ - без пробелов

<div>test
</div><div>test
</div><div>test
</div>

И общий CSS:

div {
  border:solid 1px black;
  display:inline-block;
}

Ответ 3

Избавьтесь от новой строки между окончанием предыдущего div и началом следующего div Например, замените следующее:

<div id="div1">
 Div Item 1
</div>
<div id="div2">
 Div Item 2
</div>

<div id="div1">
 Div Item 1
</div><div id="div2">
 Div Item 2
</div>

Ответ 4

Использование float:left или display:inline-block будет работать. обратитесь к рабочему примеру ссылки здесь.

Ответ 5

У вас, скорее всего, есть новые строки между div в вашем HTML, правильно? Если между разделителями есть разделители, то в браузере будут отображаться пробелы между ними.

В следующем примере есть пробелы между div:

<style>
* {
    margin: 0;
    border: 1px solid black;
}

div {
    display: inline-block;
}
</style>

<div>
Div1
</div>

<div>
Div2
</div>

<div>
Div3
</div>

Есть два метода, которые вы можете использовать для удаления пробелов между div. Либо уберите разделители между элементами div так:

<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>

Или сделайте свои плавающие элементы div:

...
div {
    display: inline-block;
    float: left;
}
...

Надеюсь, что это поможет!

Edit:
Также см. Соответствующий вопрос SO: Как я могу остановить новую строку от добавления пробела между моими элементами списка в HTML.