В чем разница между блочным и встроенным блоком с шириной: 100%?

Ответ 1

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

Однако есть улов.

Блок-блок участвует в контексте форматирования блока, а встроенный блок участвует в встроенном контексте форматирования (хотя он устанавливает контекст форматирования блоков для своих потомков, как и блок-блок при определенных условиях). См. раздел 9.4. В основном это означает, что встроенный блок обрабатывается так, как будто это текст, который, в свою очередь, означает, что большинство свойств, которые обычно применяются к тексту, также применяются к встроенному блоку. Эти свойства включают, помимо прочего, text-indent, text-align и vertical-align.

Это может вызвать нежелательные побочные эффекты, которые вы можете легко предотвратить, не используя display: inline-block в первую очередь. См. этот вопрос для интересного примера того, что может случиться.

Модель коробки для встроенных блоков также несколько отличается от модели блоков блоков. Раздел 10 содержит все подробные подробные сведения, но основными отличиями являются:

• Без объявления width: 100%, как вы могли подозревать, встроенный блок будет сжиматься, чтобы соответствовать его содержимому.

• Поскольку встроенный блок работает в потоке, вы не можете центрировать его с автоматическим левым и правым полями. Вместо этого вы используете text-align: center. Само собой разумеется, что он должен быть в своей собственной строке без текста, окружающего его в одной строке, но если вы устанавливаете width: 100%, это не будет проблемой.

• В строковых блоках никогда не влияет сбой краев.

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

Ответ 2

Я бы сказал все, что сказал @BoltClock; он делает много хороших моментов.

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

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

Эта точка применяется в равной степени к элементам block и inline-block, но чаще встречается с inline-block, потому что разница в том, что block обычно не нужно устанавливать в width:100%, поскольку она по умолчанию для расширения, чтобы заполнить ширину в любом случае, и без модели коробки, заставляя ее переходить через край.

Чтобы избежать этого, вы можете переключить модель окна с помощью box-sizing:border-box, чтобы границы и т.д. были помещены внутри поля, и, таким образом, если вы попросите with:100%, то что вы получите. Дополнительную информацию см. В странице выбора размера MDN.