I'm currently working on crafting a responsive menu for a website, but I've encountered an issue: The a tag (red color) seems to lose a few pixels when setting the width of the div (blue color).
To spot this discrepancy, you'll need to access the link provided in the Pen, open it in Chrome's inspector tool, and select the red box. You'll notice that the width is consistently less than 30 pixels (for example: 28.72, 27.60, etc.).
I've experimented with alternative HTML tags, but unfortunately, the outcome remains unchanged. Why does this occur, and what would be the best solution to ensure that the a tag maintains a consistent width and height of 30px?
Here's the pen link: https://codepen.io/Jnico/pen/RQaEoa
body {
padding: 0;
margin: 0;
}
.menu__container {
width: 100%;
background: black;
padding: 0 5px;
}
.menu {
width: 100%;
max-width: 1024px;
height: 55px;
margin: auto;
display: flex;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
.menu__buttons {
width: 100%;
background: blue;
margin-left: 15px;
display: flex;
justify-content: space-between;
}
.button {
padding: 6px 20px;
border: 1px solid #FFFFFF;
}
<nav class="menu__container">
<div class="menu">
<a class="logo"></a>
<div class="menu__buttons">
<a class="button">Button 1</a>
<a class="button">Button 2</a>
</div>
</div>
</nav>