未设置border/margin/padding时picture元素间出现间隙的原因

img属于行内替换元素，默认vertical-align属性值为baseline（基线对齐），浏览器渲染行内元素时，会自动在基线下方预留出容纳英文小写字母g、p、q这类下行部分的空白空间，即使你已经给img设置了明确的宽高，这个默认行布局规则带来的空隙依然会存在。这个间隙和picture、section元素的padding、margin设置无关，这也是你移除source元素仅保留img时，间隙依然存在的原因。

以下任意一种方案都可以消除间隙，根据实际场景选择即可：

• 方案1：将图片设置为块级元素，脱离行内布局规则，是最推荐的无副作用写法

.bg_img{
    width:100vw;
    height:100vh;
    object-fit: cover;
    object-position: center;
    /* 新增属性 */
    display: block;
}

• 方案2：修改图片的垂直对齐规则，避开基线对齐

.bg_img{
    width:100vw;
    height:100vh;
    object-fit: cover;
    object-position: center;
    /* 新增属性，值设为top/middle/bottom都可以实现效果 */
    vertical-align: top;
}

• 方案3：清空父元素的字体大小，消除行盒预留的文本空间，注意如果父元素内有文本内容需要单独重设字体大小，否则文字会被隐藏

section, picture{
    font-size: 0;
}

额外优化提示：你当前给html、body设置了固定width:100vw，当页面内容总高度超出视口高度出现垂直滚动条时，100vw的宽度计算会包含滚动条占位宽度，容易触发横向滚动条，建议将宽度属性替换为width: 100%适配性更好。

内容的提问来源于stack exchange，提问作者stanley