html - 如何将我的 div 对齐到图片的边缘？

Question

我在为我的 div 边缘添加边框到图片边缘时遇到问题。

在我将边框添加到我的第二个 div 之前，它完全对齐，但现在我添加了它，div 的边缘和图片之间有一个间隙。

.headDiv {
  position: relative;
  width: 100%;
}
#heading {
  font-family: fantasy;
  font-size: 36;
  position: absolute;
  top: 25%;
  left: 35%;
}
#navBarDiv {
  height: 30px;
  width: 100%;
  background-color: limegreen;
  margin-top: -4px;
  border: 10px ridge gray;
}

<div class="headDiv">
  <img id="imgBackgroud" src="http://vignette1.wikia.nocookie.net/unturned-bunker/images/4/4c/PEILEVEL.png/revision/latest?cb=20150321082112" alt="background behing heading" height="200px" width="100%" />
  <h1 id="heading">Etowah Unturned Server</h1>
</div>
<div id="navBarDiv">
</div>

Answer 1

将 box-sizing: border-box 添加到带边框的 div 中。这将包括 width 和 height 计算中的任何边框和填充。

#navBarDiv {
  height: 30px;
  width: 100%;
  background-color: limegreen;
  margin-top: -4px;
  border: 10px ridge gray;
  box-sizing: border-box; /* NEW */
}

现在默认的 box-sizing: content-box 被覆盖了，你的边框不会扩展 div。

https://css-tricks.com/box-sizing/