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

У Inline Blocks это странное пространство между ними. Я мог бы жить с ним, вплоть до того момента, когда, если я загружу больше контента с помощью 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/

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

Ответ 1

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

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

Ответ 2

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

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

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

Или вы можете попробовать немного взломать CSS:

http://jsfiddle.net/AWMMT/6/

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

Ответ 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;
}

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

Ответ 4

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

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

Как

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

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

Изменить 2016:

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

<span>Text</span

><span>Text 2</span>

Ответ 5

Также вы можете сделать это так (что ИМХО, я считаю, является синтаксически правильным)

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

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