Получение дополнительного отступа/поля вокруг многострочных ссылок ⇐ CSS

[Anonymous]

У меня есть следующий код

Код: Выделить всё

.menu {
margin: 20px;
display: flex;
justify-content: center;
}

.menuitem {
height: 78px;
width: 102px;
padding: 15px 9px;
margin: auto 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: black;
}

Код: Выделить всё

[url=item1.html]Item 1[/url]
[url=item2.html]Item 2 extra text[/url]

И justify-content:center, и text-align:center кажутся необходимыми, поскольку Кажется, один работает с однострочным текстом, а другой - с многострочным. Я могу с этим жить, и это не настоящая проблема. Однако у меня также есть

Код: Выделить всё

.menulink {
color: white;
padding: 2px;
text-decoration: none;
}

.menulink:hover {
border: 1px dotted white;
}

Это работает так, как и предполагалось, добавляя рамку вокруг элементов при наведении на них курсора. Проблема в том, что только для однострочных ссылок граница «дополняется» на 2 пикселя от текста. Для ссылок, занимающих более одной строки, между левой и правой частью текста и границей до заполнения .menuitem имеется дополнительное отступ или поле.
Я не совсем уверен, что делаю это правильно. Использование justify-content:center и text-align:center кажется мне уродливым хаком, но без него я не могу заставить работать свой макет и центрировать текст в обоих случаях. Наличие многострочных ссылок с flexbox, похоже, нарушает его. Для справки, меню представляет собой киноленту, в которой пункты меню в фильмах расположены рядом друг с другом.
Изменение 1: я внес некоторые изменения, но многострочные ссылки по-прежнему охватывают всю область содержимого слева. вправо https://jsfiddle.net/3pce4oxh/
Изменение 2: в качестве альтернативы я сделал так, чтобы все они охватывали всю область https://jsfiddle.net/9tq5ogcm/

Подробнее здесь: https://stackoverflow.com/questions/793 ... line-links