0

Приветствую. Имеется кусок CSS + HTML ниже, хотелось бы узнать почему border-bottom уменьшает height на 5px несмотря на то, что box-sizing стоит 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>

4
  • Именно поэтому.
    – Qwertiy
    1 авг 2017 в 10:13
  • Окей. Убрал box-sizing, текст все так же прыгает, высота уменьшается. В чем магия?
    – Arc
    1 авг 2017 в 10:15
  • делайте через box-shadow, а не бордер, либо через псевдоэлемент абсолютный
    – sinneren
    1 авг 2017 в 10:18
  • А в чем собственно проблема? Не хотелось бы убирать явное решение костылями.
    – Arc
    1 авг 2017 в 10:19

1 ответ 1

4

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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.