0

In this SSCCE, what was expected/anticipated was that the four div's would appear in a single row. But they didn't, because of this space between the div's, and this space is not even margin.

From my SO search, I found out about something called border-collapsing. So in order to avoid that phenomenon, I added a few CSS rules to like all the HTML elements that exist, as you can see in the beginning of my CSS file. This did get rid of the white space at the edges of the browser window, but not that between the divs.

So what is happening here, and what can I do about it?

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>
Solace
  • 8,612
  • 22
  • 95
  • 183

2 Answers2

1

Those spaces are text nodes containing whitespace characters.

Between <div class="item item1 wheat">a.</div> and <div class="item item2 pink">a.</div> you have a new line followed by three spaces.

If you don't want them, delete them from the 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>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

The spaces between closing and opening div tags in the code are displayed. Try this:

     <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>
i4h
  • 851
  • 7
  • 8