Getting border around 100vh / 100vw divs? (Affecting total width and height of divs)

Question

I have 5 divs, each 100vh in height and 100vw in width, aligned horizontally next to each other within a larger div that is 100vh in height and 500vw in width.

However, there seems to be a border around each of these divs that are making them slightly larger than 100% width and height.

How do I remove this border? I have noticed it's not really a 'border', but more of a space between the divs.

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div>
  <div class="section" id="s2">
  </div>
  <div class="section" id="s3">
  </div>
  <div class="section" id="s4">
  </div>
  <div class="section" id="s5">
  </div>
</div>

score 1 · Accepted Answer · answered Oct 07 '19 at 15:56

1

Inline elements are sensitive to white space in your code. Remove the white space and the gap disappears:

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div><div class="section" id="s2">
  </div><div class="section" id="s3">
  </div><div class="section" id="s4">
  </div><div class="section" id="s5">
  </div>
</div>

answered Oct 07 '19 at 15:56

j08691

204,283
31
260
272

This worked perfectly, thankyou - but I have to ask, why is this the case? – CoopDaddio Oct 07 '19 at 16:00
@CoopDaddio Are you asking why the folks that created the standards chose to make inline elements respect whitespace in the code? – j08691 Oct 07 '19 at 16:08

score 0 · Answer 2 · answered Oct 07 '19 at 15:56

1.) Add vertical-align: top; to the inline-block elements to avoid white space at their bottom.

2.) Avoid/remove line breaks /new lines in the HTML code between the inline-block elements to avoid the horizontal space between them (being inline).

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  vertical-align: top;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div><div class="section" id="s2">
  </div><div class="section" id="s3">
  </div><div class="section" id="s4">
  </div><div class="section" id="s5">
  </div>
</div>

score 0 · Answer 3 · answered Oct 07 '19 at 15:58

Add font-size: 0; to the container

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  display: inline-block;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-color: blue;
}

.sectionOverlay {
  width: 500vw;
  height: 100vh;
  font-size: 0;
}

<div class="sectionOverlay">
  <div class="section" id="s1">
  </div>
  <div class="section" id="s2">
  </div>
  <div class="section" id="s3">
  </div>
  <div class="section" id="s4">
  </div>
  <div class="section" id="s5">
  </div>
</div>

Getting border around 100vh / 100vw divs? (Affecting total width and height of divs)

3 Answers3