CSS навигация строка ссылок фокус цвет наклон

Question

Я создаю панель навигации для веб-сайта, и я хочу, чтобы элементы меню меняли цвет фона, когда я наводил курсор на них. Однако функция изменения цвета работает, если я более подробно рассмотрю панель навигации, когда наводил курсор на один элемент меню, я вижу, что панель навигации (div) и элементы меню (a) не имеют одинаковой высоты. (Красный прямоугольник не так высок, как оранжевый.) Это всего лишь один пиксель или около того, но это действительно раздражает. Я использовал 20px padding для высоты, но, видимо, что-то не так, и я уверен, что есть лучший способ заставить его работать. Кстати, я новичок в веб-разработке и CSS.

 div { 
 
\t \t \t background-color: orange; \t \t \t 
 
\t \t \t padding: 20px; 
 
\t \t } 
 
\t \t a { 
 
\t \t \t padding: 20px; 
 
\t \t } 
 
\t \t a:hover { 
 
\t \t \t background-color: red; 
 
\t \t }

<div> 
 
\t \t <a href="">Menu 1</a> 
 
\t \t <a href="">Menu 2</a> 
 
\t </div>

Спасибо за вашу помощь заранее.

Answer 1

Вы пробовали:

div { 
    background: orange; 
} 

a { 
    display: inline-block; 
    padding: 20px; 
} 

путем установки дисплея: inline-block; на вашем <a>, отступы должны вести себя в соответствии с требованиями.