Why is there a gap/border between picture elements when border, margin and padding are not specified?

Question

I am using the picture element to create a series of background images, each should be 100vw wide and 100vh high. But there is a gap between the images, I am not sure whey. I initially had multiple source elements specified within the picture element plus the img element, but I get the same effect with only the img element, so I have used this here to keep things brief.

Dev tools shows there is no padding or margin. Can anyone explain what is creating the gap between the top and bottom of each picture elements. I want the picture elements to be adjacent, i.e. touching without a gap.

HTML

<section>
    <picture>
        <img class="bg_img" src="public/img/pic0.jpg">
    </picture>
</section>
<section>
    <picture>
        <img class="bg_img" src="public/img/pic1.jpg">
    </picture>
    <picture>
        <img class="bg_img" src="public/img/pic2.jpg">
    </picture>
        <img class="bg_img" src="public/img/pic3.jpg">
    <picture>
        <img class="bg_img" src="public/img/pic4.jpg">
    </picture>
</section>
<section>
    <picture>        
        <img class="bg_img" src="public/img/pic5.jpg">
     </picture>
</section>

CSS

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

html, body{
    width:100vw;
    height:100vh;
}

.bg_img{
    width:100vw;
    height:100vh;
    object-fit: cover;
    object-position: center;
}

score 1 · Accepted Answer · answered Jun 22 '22 at 04:24

Believe it or not, but this is actually caused by the whitespace between your <section> tags.

The following example shows (essentially) the same as your code shown above, with the whitespace problem:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

.bg_img {
  /*
  width: 100vw;
  height: 100vh;
  */
  object-fit: cover;
  object-position: center;
}

<section>
  <picture><img class="bg_img" src="http://placekitten.com/100/100"></picture>
</section>
<section>
  <picture><img class="bg_img" src="http://placekitten.com/100/100"></picture>
  <picture><img class="bg_img" src="http://placekitten.com/100/100"></picture>
  <picture><img class="bg_img" src="http://placekitten.com/100/100"></picture>
  <picture><img class="bg_img" src="http://placekitten.com/100/100"></picture>
</section>
<section>
  <picture><img class="bg_img" src="http://placekitten.com/100/100"></picture>
</section>

When I minify the HTML (by putting it all one one line), the horizontal spacing disappears:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

.bg_img {
  /*
  width: 100vw;
  height: 100vh;
  */
  object-fit: cover;
  object-position: center;
}

<section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section><section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section><section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section>

If you additionally want to get rid of the vertical space, you'll need to set line-height to 0, as can be seen in the following:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 0; /* added */
}

html,
body {
  width: 100vw;
  height: 100vh;
}

.bg_img {
  /*
  width: 100vw;
  height: 100vh;
  */
  object-fit: cover;
  object-position: center;
}

<section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section><section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section><section><picture><img class="bg_img" src="http://placekitten.com/100/100"></picture></section>

Can I ask is there a way to identify this through debugging, I had used dev tools to try locate the issue but didn't find anything. Or do I just need to memorize situations where this occurs? — stanley, Jun 22 '22 at 04:32

Why is there a gap/border between picture elements when border, margin and padding are not specified?

1 Answers1