Дисплей: встроенный блок - что это за пространство?

Question

Встроенные блоки имеют странное пространство между ними. Я мог бы жить с этим, вплоть до того момента, когда, если я загружу больше контента с помощью AJAX Call, крошечное пространство исчезнет. Я знаю, что я что-то здесь упускаю.

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

Как сделать интервалы согласованными во встроенных блоках?

Answer 1

Пространство в HTML. Есть несколько возможных решений. От лучшего к худшему:

1. Удалите фактическое пространство в HTML (в идеале ваш сервер мог бы сделать это для вас, когда файл обслуживается, или, по крайней мере, ваш шаблон ввода мог бы быть соответствующим образом разнесен) http://jsfiddle.net/AWMMT/2/
2. использование float: left вместо display: inline-block, но это имеет нежелательные последствия для высоты: http://jsfiddle.net/AWMMT/3/
3. Установите контейнер font-size до 0 и установить соответствующий font-size для внутренних элементов: http://jsfiddle.net/AWMMT/4/ - это довольно просто, но тогда вы не сможете воспользоваться правилами относительного размера шрифта для внутренних элементов (проценты, em)

Answer 2

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- no whitespace/new line here.

Ваши пробелы были новыми строками, которые браузер преобразовывал в "пробелы" при его отображении.

Или вы можете попытаться немного взломать с помощью CSS:

Flexbox удобно игнорирует пробелы между дочерними элементами и будет отображаться аналогично последовательным элементам inline-block.

http://jsfiddle.net/AWMMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

Старый ответ (по-прежнему относится к более старым, предварительно настроенным браузерам) http://jsfiddle.net/AWMMT/6/

body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }

Answer 3

На самом деле существует действительно простой способ удаления пробелов из встроенного блока, который является простым и семантическим. Он называется нестандартным шрифтом с пробелами нулевой ширины, что позволяет свернуть пробел (добавленный браузером для встроенных элементов, когда они находятся на отдельных строках) на уровне шрифта с использованием очень маленького шрифта. После того, как вы объявите шрифт, вы просто измените семейство шрифтов на контейнере и снова вернетесь к потомкам, и вуаля. Как это:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Костюм по вкусу. Вот загрузка шрифта, который я только что приготовил в font-forge и конвертировал с помощью генератора веб-шрифтов FontSquirrel. У меня ушло всего 5 минут. Включено объявление css @font-face: сжатый шрифт пробела нулевой ширины. Он находится на Google Диске, поэтому вам нужно нажать "Файл"> "Загрузить", чтобы сохранить его на своем компьютере. Возможно, вам также потребуется изменить пути к шрифту, если вы скопируете объявление в ваш основной файл CSS.

Answer 4

Вы можете закомментировать пробелы.

Оригинальный ответ с 2013 года

Подобно:

<span>Text</span><!--

--><span>Text 2</span>

Изменить 2016:

Мне также нравится следующий метод, в котором вы просто ставите закрывающую скобку прямо перед следующим элементом.

<span>Text</span

><span>Text 2</span>

Answer 5

Кроме того, вы можете сделать это так (что я думаю, что это правильно)

<div class="div1">...</div>
<div class="div1">...</div>
.
.

.div1{
    display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }