Я бы сказал все, что сказал @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 box-sizing .