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

Question

У 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/

Как сделать расстояние между последовательными в Инлайн блоков?

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/ - это довольно просто, но тогда вы не можете воспользоваться относительных правил размера шрифта на внутренних элементах (percen tages, em)

Answer 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 */ } 

Answer 3

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

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

Как:

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

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

Edit 2016:

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

<span>Text</span 

><span>Text 2</span> 

Answer 4

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

@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; 
} 

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

Answer 5

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

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

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