为什么这个space，不是margin，出现在div个元素之间呢？

Question

在这个SSCCE中，expected/anticipated是四个div会出现在一行中。但他们没有，因为 div 之间的这个 space，而这个 space 甚至不是 margin.

从我的 SO 搜索中，我发现了一种叫做边界折叠的东西。所以为了避免这种现象，我添加了一些 CSS 规则来喜欢所有存在的 HTML 元素，正如你在我的 CSS 文件开头看到的那样。这确实摆脱了浏览器 window 边缘的白色 space，但没有摆脱 div 之间的白色 space。

那么这里发生了什么，我能做些什么呢？

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  font-size: 100%;
  vertical-align: baseline;
}
.wrapper {
  overflow-x: scroll;
  position: relative;
}
div.item {
  /*position: absolute;*/
  display: inline-block;
  width: 25%;
  height: 25vw;
}
.wheat {
  background-color: wheat;
}
.pink {
  background-color: pink;
}
.beige {
  background-color: beige;
}
.gainsboro {
  background-color: gainsboro;
}
.coral {
  background-color: coral;
}
.crimson {
  background-color: crimson;
}
.item1 {
  left: 0%;
}
.item2 {
  left: 25%;
}
.item3 {
  left: 50%;
}
.item4 {
  left: 75%;
}
.item5 {
  left: 100%;
}
.item6 {
  left: 125%;
}

<div class="wrapper">
  <div class="item item1 wheat">a.</div>
  <div class="item item2 pink">a.</div>
  <div class="item item3 beige">a.</div>
  <div class="item item4 gainsboro">a.</div>
  <!--
  <div class="item item5 coral">a.</div>
  <div class="item item6 crimson">a.</div>-->
</div>

Answer 1

这些空格是包含空白字符的文本节点。

在 <div class="item item1 wheat">a.</div> 和 <div class="item item2 pink">a.</div> 之间有一个新行，后跟三个空格。

如果您不需要它们，请将它们从 HTML 中删除。

html,body,div{
  margin: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  font-size: 100%;
  vertical-align: baseline;
}
.wrapper {
  overflow-x: scroll;
  position: relative;
}
div.item {
  /*position: absolute;*/
  display: inline-block;
  width: 25%;
  height: 25vw;
}
.wheat {
  background-color: wheat;
}
.pink {
  background-color: pink;
}
.beige {
  background-color: beige;
}
.gainsboro {
  background-color: gainsboro;
}
.coral {
  background-color: coral;
}
.crimson {
  background-color: crimson;
}
.item1 {
  left: 0%;
}
.item2 {
  left: 25%;
}
.item3 {
  left: 50%;
}
.item4 {
  left: 75%;
}
.item5 {
  left: 100%;
}
.item6 {
  left: 125%;
}

<div class="wrapper">
  <div class="item item1 wheat">a.</div><div class="item item2 pink">a.</div><div class="item item3 beige">a.</div><div class="item item4 gainsboro">a.</div>
</div>

Answer 2

显示代码中关闭和打开 div 标记之间的空格。试试这个：

     <div class="item item1 wheat">a.</div><!--
  --><div class="item item2 pink">a.</div><!--
  --><div class="item item3 beige">a.</div><!--
  --><div class="item item4 gainsboro">a.</div>

为什么这个space，不是margin，出现在div个元素之间呢？

Why is this space, which is not margin, appearing between these div elements?

html

css

css-position