Question

在这个SSCCE中，预期/预期的是四个div将出现在一行中。但他们没有，因为div之间的这个空间，这个空间甚至不是margin。

从我的SO搜索中，我发现了一些名为border-collapsing的东西。因此，为了避免这种现象，我添加了一些CSS规则来像所有存在的HTML元素一样，正如您在CSS文件的开头所看到的那样。这确实摆脱了浏览器窗口边缘的空白区域，但没有消除div之间的空白区域。

那么这里发生了什么，我该怎么办？

＆＃13;

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

＆＃13;

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

＆＃13;

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标签之间的空格。试试这个：

atomic s++

为什么这些div元素之间出现了这个不是边距的空间？

2 个答案: