Почему <div>не изменяет размер для переноса <a>, если <a>'display' не объявлен как 'inline-block'

Question

Я сделал простой заголовок меню, но если тег <a> не является inline-block, <div> переносит только размер содержимого, а не отступы ... Мне просто нужно знать, почему это происходит, и если есть другой способ сделать тег <div> оберточным для всего содержимого, включая отступы. Вот код:

. html:

<div class="menu">
  <a class="menu-item" href="#">Menu 1</a>
  <a class="menu-item" href="#">Menu 2</a>
  <a class="menu-item" href="#">Menu 3</a>
</div>

. css:

.menu {
    background-color: lightsalmon;
}

/* menu item */
.menu .menu-item {
    /* sizing */
    display: inline-block; /* IF REMOVED, THE MENU <div> WILL IGNORE THE <a>PADDING */
    padding: 16px;
    min-width: 64px;

    /* text decorating */
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 16px;
}

.menu .menu-item:hover {
    background-color: salmon;
}

Спасибо за любую помощь!

Answer 1

Вы не указали высоту своей основной страницы, поэтому она неправильно отображает menu-item.

ссылки по умолчанию используют display: inline, который не увеличивается автоматически.

Попробуйте добавить: display:flex; к вашему классу меню (при добавлении этого menu потребуется height для правильного отображения menu-items): https://codepen.io/Aypro18/pen/PoPGwoq

.menu {
    background-color: lightsalmon;
  display:flex;
}

/* menu item */
.menu .menu-item {
    /* sizing */
    padding: 16px;
    min-width: 64px;

    /* text decorating */
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 16px;
}

.menu .menu-item:hover {
    background-color: salmon;
}

<div class="menu">
  <a class="menu-item" href="#">Menu 1</a>
  <a class="menu-item" href="#">Menu 2</a>
  <a class="menu-item" href="#">Menu 3</a>
</div>

Answer 2

Используйте display:flex; в вашем основном css, и отбросьте это display: inline-block; из вашего menu-item.

Answer 3

Это происходит потому, что <a> элементы display: inline.

Встроенные элементы, в отличие от block, inline-block, flex и inline-flex, не растут в height. Если вы попытаетесь использовать height: 100px, вы увидите, что встроенный элемент не будет расти по высоте.

Как только элемент <a> является одним из вышеупомянутых отображений, он позволяет ему набирать высоту, и, следовательно, высота от отступов.