Почему display = встроенный блок добавляет неконтролируемые вертикальные поля

Ответ 1

Когда вы создаете элемент .txt inline-block, он переносится в текстовый поток родительского элемента .btn. В этот момент начинается высота строки .btn, которая больше высоты элемента .txt.

Итак, добавьте .btn {line-height: 10px;} (например), и ваша проблема исправлена. Я видел, что вы уже пытались повлиять на высоту строки внутреннего элемента .txt, поэтому вы были довольно близки к вашим попыткам. Корректировка размера шрифта также будет работать, так как высота строки по умолчанию является формулой на основе размера шрифта. В любом случае ключ должен сделать это на родительском элементе, а не на дочернем элементе.

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

Ответ 2

inline-block является блестящим и удобным для многих случаев. Но они приходят с одной досадной ловушкой: ненужные пробелы. Поскольку вы встраиваете встроенный блок внутри встроенного блока, это приводит к бедовому пространству. Вы можете прочитать все о пробелах и встроенных блоках в блог Дэвида Уолша.

Есть много способов справиться с этим, но мое любимое (и наиболее широко поддерживаемое) решение устанавливает это в родительский элемент inline-block:

.btn {
  font-size: 0;
}

Вот пример до/после: http://jsfiddle.net/C6V3S/1/

Ответ 3

Это не вызвано пробелами (у вас нет внутри div в вашем HTML), а также помещением inline-block внутри другого inline-block. Это вызвано из-за line-height внешнего div. Как видно из приведенной ниже скрипты, текущий line-height в красном пограничном div имеет line-height, который задается браузером (и он варьируется от браузера к браузеру), и до тех пор, пока что-то внутри div, который занимает пробел как элемент inline или inline-block, на height будет влиять line-height.

Существует много способов обойти это, и все они в значительной степени выполняют одно и то же:

1) Извлеките внутренний элемент из потока, а затем снова вставьте его обратно. Это заставит внешний div думать, что внутри него нет ничего, и попытайтесь стать как можно меньше, а затем заполните пространство вокруг элемента, когда оно вставлено обратно. Самый простой способ сделать это - float его.

2) Сделайте внешний элемент занятым. Это заставит внутренний элемент определить height и width его родителя. Если вы сделаете font-size: 0, как уже упоминалось ранее, это заставит внешний элемент думать, что встроенный внутренний элемент не занимает места и, следовательно, не занимает какое-либо пространство и не обертывается вокруг внутреннего элемента. Это можно сделать, установив line-height: 0 (что является идеальным решением проблемы, так как проблема line-height).

Есть и другие способы заставить родительский элемент не иметь его line-height, но это должно заставить вас начать.

http://jsfiddle.net/C6V3S/4/

Ответ 4

Это "как это работает", но его можно обойти. Самый простой способ исправить это - установить отрицательные поля на .btn. Он должен работать для любого современного браузера (IE8 и выше, если я помню). Плавающие элементы также должны достичь того, чего вы хотите. Как совершенно другое решение, если ваша проблема с ним просто эстетична, вы можете просто обернуть элементы родителем, установить родительский background-color на то, что вы хотите, и не беспокоиться о его дочерних элементах. Они будут прозрачны для всех, что под ними, и вы избавитесь от этих визуальных перерывов.

Если вы хотите придерживаться отрицательных полей с помощью display: inline-block, но нужно, чтобы этот надоедливый первый элемент не прыгал влево из своего родителя, вы можете настроить его явно:

.btn {
    margin-left: -4px;
}

.btn:first-of-type {
    margin-left: 0px;
}

Изменить: прочитав еще один ответ, я не уверен, понял ли я этот вопрос: вы имеете в виду маржу поверх элементов (которые были бы горизонтальными) или поля по бокам (по вертикали)?