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;
}
>Solution :
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>