大约100/100的边境线？(影响div的总宽度和高度)

Question

我有5个div，每个100 in的高度和100 in的宽度，水平对齐在一个较大的div，即100 in的高度和500 in的宽度。

然而，似乎有一个边界周围的每一个这些div，使他们略大于100%的宽度和高度。

我该怎么移除这条边框？我注意到这并不是真正的‘边界’，而是更多的空间之间的div。

​

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div>
  <div class="section" id="s2">
  </div>
  <div class="section" id="s3">
  </div>
  <div class="section" id="s4">
  </div>
  <div class="section" id="s5">
  </div>
</div>

​

Answer 1

内联元素对代码中的空白很敏感。删除空白，空白消失：

​

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div><div class="section" id="s2">
  </div><div class="section" id="s3">
  </div><div class="section" id="s4">
  </div><div class="section" id="s5">
  </div>
</div>

​

Answer 2

1.)将vertical-align: top;添加到inline-block元素以避免其底部的空白。

2.)避免/移除/new元素之间的inline-block代码行，以避免它们之间的水平空间(内联)。

​

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  vertical-align: top;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div><div class="section" id="s2">
  </div><div class="section" id="s3">
  </div><div class="section" id="s4">
  </div><div class="section" id="s5">
  </div>
</div>

​

Answer 3

将font-size: 0;添加到容器

​

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
  font-size: 0;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div>
  <div class="section" id="s2">
  </div>
  <div class="section" id="s3">
  </div>
  <div class="section" id="s4">
  </div>
  <div class="section" id="s5">
  </div>
</div>

​