未指定邊框、邊距和填充時，為什么圖片元素之間存在間隙/邊框？[復制]-有解無憂

這個問題在這里已經有了答案：如何洗掉行內/行內塊元素之間的空間？ (41 個回答) div 內的影像在影像下方有額外的空間 10 個答案 27 分鐘前關閉。

我正在使用圖片元素創建一系列背景影像，每個應該是 100vw 寬和 100vh 高。但是影像之間存在差距，我不確定乳清。我最初在圖片元素和 img 元素中指定了多個源元素，但我只使用 img 元素得到了相同的效果，所以我在這里使用它來保持簡短。

開發工具顯示沒有填充或邊距。誰能解釋是什么造成了每個圖片元素的頂部和底部之間的差距。我希望圖片元素是相鄰的，即沒有間隙地接觸。

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

uj5u.com熱心網友回復：

信不信由你，但這實際上是由標簽之間的空格引起的。<section>

以下示例顯示（基本上）與上面顯示的代碼相同，但存在空格問題：

顯示代碼片段

* {
  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>

當我縮小 HTML（通過將其全部放在一行）時，水平間距消失了：

顯示代碼片段

* {
  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>

如果您還想擺脫垂直空間，則需要設定line-height為0，如下所示：

顯示代碼片段

* {
  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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494268.html

標籤：html css 图片

上一篇：如何將物件的名稱保存在陣列物件中？

下一篇：動態型別取決于IDE中的引數數量