Greetings. There is a piece of CSS + HTML below, I would like to know why the border-bottom reduces the height by 5px despite the fact that box-sizing is worth the border-box?

#wrapper { background-color: #1d1d1d; font-family: "Lato", sans-serif; color: #8b58cf; font-weight: bold; } #top { position: fixed; width: 100%; height: 10vh; background-color: #1d1d1d; display: flex; align-items: center; justify-content: center; font-size: 16px; } nav { height: 100%; width: 60%; } nav #navmenu { display: flex; height: 100%; width: 100%; padding: 0; margin: 0; justify-content: center; align-items: center; } nav #navmenu .navmenuitem { display: flex; justify-content: center; align-items: center; cursor: pointer; height: 100%; width: 25%; transition: color, background-color 0.2s ease-in 0s; box-sizing: border-box; } nav #navmenu .navmenuitem:hover { background-color: #8b58cf; color: #242424; } nav #navmenu .navmenuitem:first-child { border-bottom: 5px solid #8b58cf; } 
 <div id="wrapper"> <header id="top"> <nav id="nav"> <div id="navmenu"> <div class="navmenuitem"><span>ABOUT</span></div> <div class="navmenuitem"><span>SKILLS</span></div> <div class="navmenuitem"><span>PROJECTS</span></div> <div class="navmenuitem"><span>CONTACTS</span></div> </div> </nav> </header> </div>

  • That is why. - Qwertiy ♦
  • Okay. Removed box-sizing, the text still jumps, the height decreases. What is the magic? - Arc
  • do it via box-shadow, not a border, or through an absolute pseudo - element - sinneren
  • What is the actual problem? I would not want to remove the obvious solution crutches. - Arc

1 answer 1

 div { float: left; line-height: 2em; background: black; padding: 5px 1em 0; border-bottom: 5px solid black; color: white; transition: background .5s linear; } div:hover { background: blue; border-bottom-color: blue; } 
 <div>123</div><div>456</div>