Why is there white space between these two divs?

Question

I want to divide page into three blocks, each block have to keep aspect ratio (16:9), two of them have to be side by side, third one should be below them. I achieved it, but there is white space between two first blocks. How can i remove it?

https://jsfiddle.net/q3zutvgv/

HTML and CSS:

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        width: 100%;   
        min-width: 100%;
      }
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.wrapper2 {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper2:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
.main2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: green;
  /* let's see it! */
  color: white;
}
.main3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: orange;
  /* let's see it! */
  color: white;
}

<body>

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>
<div class="wrapper">
  <div class="main2">
    div2.
  </div>
</div>
<div class="wrapper2">
  <div class="main3">
    This is your div with the specified aspect ratio.
  </div>
</div>

I can't see any space between them in the fiddle – EugenSunic Aug 04 '15 at 00:31 — EugenSunic, Aug 04 '15 at 00:31
The parent div needs to be 0px for text. – frosty Aug 04 '15 at 00:34 — frosty, Aug 04 '15 at 00:34
is this what you want? https://jsfiddle.net/btzfgoaq/ – Dyrandz Famador Aug 04 '15 at 00:45 — Dyrandz Famador, Aug 04 '15 at 00:45

score 1 · Accepted Answer · edited May 23 '17 at 10:26

To remove the space between inline-block elements, the most effective and cross-browser solution is to remove the newline between the tags. If you'd rather not let the div tags touch, one way of accomplishing that is to add an HTML comment that fills in the newline.

Live Example:

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        width: 100%;   
        min-width: 100%;
      }
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.wrapper2 {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper2:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
.main2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: green;
  /* let's see it! */
  color: white;
}
.main3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: orange;
  /* let's see it! */
  color: white;
}

<body>

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div><!--
--><div class="wrapper">
  <div class="main2">
    div2.
  </div>
</div>
<div class="wrapper2">
  <div class="main3">
    This is your div with the specified aspect ratio.
  </div>
</div>

Why is there white space between these two divs?

1 Answers1