<分区>
标签 html css css-position
<分区>
在这个 SSCCE 中，预期/预期的是四个 div 将出现在一行中。但他们没有，因为 div 之间有这个空间，这个空间甚至不是 margin。
从我的 SO 搜索中，我发现了一种叫做 border-collapsing 的东西。所以为了避免这种现象，我添加了一些 CSS 规则来喜欢所有存在的 HTML 元素，正如您在我的 CSS 文件开头看到的那样。这确实消除了浏览器窗口边缘的空白区域，但没有消除 div 之间的空白区域。
那么这里发生了什么，我能做些什么呢？
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>最佳答案
那些空格是包含空白字符的文本节点。
在 <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>关于html - 为什么在这些div元素之间会出现这个不是margin的空格呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33394672/