Could you clarify your question?
I'm wondering why my padding only becomes visible when the element is in a hover state.
The reason for this behavior is that you specifically set the background to appear only on hover:
#g li a:hover {
background: red;
}
If you're curious about why it looks strange and doesn't push the top and bottom borders away, it's because the padding you applied is to the a tag, which defaults to display: inline. What you're observing is the default behavior for an inline element. Refer to: https://www.w3schools.com/css/css_inline-block.asp
When compared to display: inline, the main difference with display: inline-block is the ability to set width and height on the element.
Furthermore, when using display: inline-block, both top and bottom margins/paddings are accounted for, unlike with display: inline.
Try out the example below to observe the distinctions between display: inline, display: inline-block, and display: block:
span.a {
display: inline; /* default for span */
width: 100px;
height: 100px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
}
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
* {
margin: 0;
padding: 0;
}
.navbar {
background: black;
display: flex;
}
.g {
display: flex;
}
.g li {
list-style: none;
}
.g li a {
text-decoration: none;
color: white;
padding: 20px;
}
.g li a:hover {
background: red;
}
.g li:nth-child(1) {
margin-left: 50px;
}
<nav class="navbar">
<ul class="g">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</nav>
<hr>
<nav class="navbar">
<ul class="g">
<li><a style="display:inline-block" href="#">Item 1</a></li>
<li><a style="display:inline-block" href="#">Item 2</a></li>
<li><a style="display:inline-block" href="#">Item 3</a></li>
<li><a style="display:inline-block" href="#">Item 4</a></li>
</ul>
</nav>
<hr>
<nav class="navbar">
<ul class="g">
<li><a style="display:block" href="#">Item 1</a></li>
<li><a style="display:block" href="#">Item 2</a></li>
<li><a style="display:block" href="#">Item 3</a></li>
<li><a style="display:block" href="#">Item 4</a></li>
</ul>
</nav>