When creating nav links, pad anchor tags, not the container elements.
When the container is padded, user need to click on the text exactly.
If anchor tag is padded, users can click near the text, for easier navigation.
Demos
Interactive
Source
1<main>2 <header>3 <h2>Must select the link</h2>4 <nav class="nav-bad">5 <ul>6 <li><a href="#">Design</a></li>7 <li><a href="#">Components</a></li>8 <li><a href="#">Develop</a></li>9 <li><a href="#">Resources</a></li>10 <li><a href="#">Blog</a></li>11 </ul>12 </nav>13
14 <h2>Select the box area</h2>15 <nav class="nav-good">16 <ul>17 <li><a href="#">Design</a></li>18 <li><a href="#">Components</a></li>19 <li><a href="#">Develop</a></li>20 <li><a href="#">Resources</a></li>21 <li><a href="#">Blog</a></li>22 </ul>23 </nav>24 </header>25</main>
1.nav-bad {2 background-color: #eee;3 & ul {4 display: flex;5 padding: 20px;6 list-style: none;7 column-gap: 50px;8
9 & a {10 border: 1px solid red;11 text-decoration: none;12 font-weight: bold;13 font-size: 1.5rem;14 letter-spacing: 0.125rem;15 color: deeppink;16
17 &:hover {18 text-decoration: revert;19 }20 }21 }22}23
24.nav-good {25 background-color: #222;26 & ul {27 display: flex;28
29 list-style: none;30 column-gap: 50px;31
32 & a {33 border: 1px solid red;34 display: inline-block;35 padding: 20px;36 text-decoration: none;37 font-weight: bold;38 font-size: 1.5rem;39 letter-spacing: 0.125rem;40 color: deeppink;41
42 &:hover {43 text-decoration: revert;44 }45 }46 }47}