Question

我无法将div的边缘与图片边缘的边框对齐。

在我将边框添加到第二个div之前，它排列得很完美，但是现在我添加了它，div的边缘和图片之间有一个间隙。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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/

Answer 2

如果删除#navBarDiv的宽度CSS规则，您将获得所需的结果。默认情况下，div元素将显示在块级别。 A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).您通过将#navBarDiv的宽度设置为100％来覆盖此规则。因此，当您在#navBarDiv的左侧和右侧添加10px的边框时，div元素显示的页面长度比您想要的长20个像素。

如何将我的div排到我的图片边缘？

2 个答案: