How to contol link margin & padding in a NavBar? - html

Question

I have written this codepen for a Top Navbar.
This Top Navbar is a <div> element containing <a> elements:
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
The key CSS is as follows:
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a {
height: 50px;
margin: 0;
padding: 15px 20px;
color: black;
text-decoration: none;
}
I have vertically centered the links in the <div> element, by:
1) giving each link a height of 50px and then
2) giving the wrapping <div> the same line-height.
This works fine.
The problem is that I am unable to precisely control the padding and margin for the links.
Right now, I have given the padding for the links an arbitrary value:
padding: 15px 20px;
However, there is a small gap at the top and bottom of each link, where the Navbar background color shows through. This can be seen when you hover over a link.
When a link is moused over, I would link the link color to cover the entire NavBar. Is there any exact calculation I can make to ensure this, rather than choosing an arbitrary value for padding-top?
Secondly, there is also a gap at the sides of each link when one hovers. It can be clearly seen when one hovers over a link that is on either side of the "active" link (the green one). I would prefer this gap to be eliminated. How can I do this?

Answer 1

By Default a tag is inline element, you should change it display property to display: inline-block. so that you can set margin and padding.
* {
box-sizing: border-box;
}
/* Extra small devices (phones) */
body {
margin: 0;
background-color: powderblue;
}
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a {
margin: 0;
padding: 10px 20px;
color: black;
text-decoration: none;
display: inline-block; /* Set inline-block for a tag */
}
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a.active {
background-color: mediumseagreen;
color: white;
}
.topnav a:hover:not(.active) {
background-color: #f1f1f1; /* light gray */
}
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>

Answer 2

Use this. I gave display:block to a and display:flex to .topnav
* {
box-sizing: border-box;
}
/* Extra small devices (phones) */
body {
margin: 0;
background-color: powderblue;
}
.topnav {
background-color: #bbb; /* gray */
height:50px;
display:flex;
line-height: 50px; /* same as height! */
}
.topnav a {
display:block;
height: 50px;
margin: 0;
padding: 0px 20px;
color: black;
text-decoration: none;
}
.topnav a.active {
background-color: mediumseagreen;
color: white;
}
.topnav a:hover:not(.active) {
background-color: #f1f1f1; /* light gray */
}
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>