爲什麼在這些div元素之間出現這個不是邊距的空間？

在這個SSCCE中，預期/預期的是四個div將出現在一行中。但他們沒有，因爲div之間的這個空間，這個空間甚至不是margin。爲什麼在這些div元素之間出現這個不是邊距的空間？

從我的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> 
 
    <!-- 
 
\t \t <div class="item item5 coral">a.</div> 
 
\t \t <div class="item item6 crimson">a.</div>--> 
 
</div>

來源

2015-10-28 Solace

這些空間是包含空白字符文本節點。

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

來源

2015-10-28 15:11:13 Quentin

在代碼關閉和打開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>

來源

2015-10-28 15:11:58 i4h

爲什麼在這些div元素之間出現這個不是邊距的空間？

回答

相關問題