100% перекрытие границы высоты элемента

Chris Altig спросил: 03 февраля 2018 в 11:38 в: html

Я совершенно не знаком с HTML / CSS, поэтому прошу прощения, если это вопрос новобранец. Следующий код имеет границу внутреннего элемента, перекрывающуюся с границей внешнего элемента, если высота для обоих установлена ​​равной 100%. Наложенное перекрытие происходит внизу.

html,
body {
  height: 100%;
}

body {
  border: 5px solid red;
}

p {
  text-align: center;
}

.body-content {
  border: 5px solid black;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
}

.left-navbar {
  float: left;
  width: 5%;
  height: 100%;
  border: 5px solid pink;
  margin-bottom: -5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <nav class="left-navbar">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
  </nav>
  <div class="body-content">
    <article>
      <p>Content</p>
    </article>
  </div>
</body>

</html>

Я попытался отрицательное отступление / отрицательное дополнение , но ни один из этих вариантов не имел никакого эффекта. Есть ли другой способ манипулировать высотой элемента, чтобы учитывать границу 5px? Наконец, почему отрицательный марж / дополнение не имеет никакого эффекта?

Спасибо заранее.


0 ответов