Отображение: дополнительный запас встроенного блока

Я работаю с несколькими div, которые установлены в display: inline-block и имеют набор height и width. В HTML, если есть разрыв строки после каждого div, появляется автоматическое поле 5px в правой и нижней части div.

Пример:

<div>Some Text</div>
<div>Some Text</div>

Есть ли свойство, которое я забыл, что позволит мне reset автоматическое поле?

Обновление

Из того, что я нашел, нет способа удалить маржу... кроме того, если у вас есть все в одной строке или, добавьте комментарии, чтобы прокомментировать разрывы строк. Пример:

<div>Some Text</div><!--
--><div>Some Text</div>

Не лучшее решение, но все же легче читать, если у вас несколько строк.

Ответ 1

Дивы рассматриваются как встроенные элементы. Подобно тому, как пробел или разрыв строки между двумя пролетами создает разрыв, он делает между встроенными блоками. Вы можете либо дать им отрицательный запас, либо установить word-spacing: -1; на окружающий контейнер.

Ответ 2

Белое пространство влияет на встроенные элементы.

Это не должно удивлять. Мы видим это каждый день с пролетом, сильными и другими встроенными элементами. Установите размер шрифта в ноль, чтобы удалить дополнительный запас.

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

Пример будет выглядеть следующим образом.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

Версия jsfiddle. http://jsfiddle.net/QtDGJ/1/

Ответ 3

Через год наткнулся на этот вопрос для встроенной проблемы LI, но нашел отличное решение, которое может применяться здесь.

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

vertical-align:bottom во всех моих элементах LI исправлена проблема с "дополнительным полем" во всех браузерах.

Ответ 4

font-size: 0 в родительский контейнер

(Источник: https://twitter.com/garand/status/183253526313566208)

Ответ 5

Более чистый способ удалить эти пробелы - с помощью float: left;:

DEMO

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS

div {
    background-color: red;
    float: left;
}

Я поддерживаю в всех новых браузерах. Никогда не получалось, почему назад, когда IE правил, многие разработчики не делали иск, их сайт хорошо работает на firefox/chrome, но сегодня, когда IE снизился до 14.3%. в любом случае, не было много проблем в IE-9, даже считалось, что он не поддерживается, например, вышеупомянутая демонстрация отлично работает.

Ответ 6

Вы можете получить вертикальное пространство, даже если у вас нет НИКАКОГО WHITESPACE между вашими элементами встроенного блока.

Для меня это было вызвано line-height. Простое исправление было:

div.container {
    line-height: 0;
}
div.container > * {
    line-height: normal;
}

Ответ 7

Для записи этот сброс и корректировка отступов не помогли мне, но эта цитата из одного из комментариев выше оказалась решающей и решила проблему для меня: "Если бы я поместил div на в той же строке он исчезает."

Ответ 8

Существует ряд обходных путей для этой проблемы, которые связаны с интервалом между словами или размером шрифта, но в этой статье предлагается удалить границу с правым краем -4px;

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Ответ 9

Можете ли вы опубликовать ссылку на HTML-код?

В конечном итоге вы сможете:

div {
    margin:0;
    padding: 0;
}

чтобы удалить интервал. Это только в одном конкретном браузере или все из них?

Ответ 10

После непродолжительной борьбы с этой проблемой я нашел очень элегантное решение в HTML 5. В HTML 5 вы не должны закрывать несколько (li, p и т.д.) тегов; стремление стать XML навсегда исчезло. Например, предпочтительный способ сделать список:

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

Браузеры должны закрыть LI, и они должны сделать это, не вводя пробелы, решая эту проблему. Если у вас все еще есть мышление XML, это кажется неправильным, но как только вы справитесь с этим, это спасет много кошмаров. И это не взлом, поскольку он основывается на формулировке спецификации HTML 5. Лучше, так как не закрывать теги повсеместно, я не ожидаю проблем с совместимостью (не проверял, хотя). Бонус в том, что HTML-форматировщики отлично справляются с этим.

Немного разработан пример: http://cssdesk.com/Ls7fK

Ответ 11

Другим решением для этого является использование HTML minifier. Это лучше всего работает с процессом сборки Grunt, где HTML можно минимизировать "на лету".

Удаляются лишние строки и пробелы, которые устраняют проблему с полями, и позволяют писать разметку, как вам нравится в среде IDE (нет </li><li>).

Ответ 12

Я столкнулся с той же проблемой. Для меня это была куча пробелов ( ), которые я вставлял. После их устранения проблема была решена.