如何在圖片和圍繞它并覆寫其邊框的文本之間添加或消除空間？

這是圖片，問題是：如何在段落和圖片的垂直交叉部分添加一些空間，從而將它們分開？以及如何消除段落和圖片之間的水平空間？

代碼：

.resimdiv{
    float:left;
    width: 100px;
}
.resim{
    float:left;
    width: 100px;
}
.metin{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11px;
    color: red;
}
h1{
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: relative;
    top:5px;
    font-size: 20px;
}
p{
    position: relative;
    top:5px;
}

HTML代碼：

<article id="icerik">
            <div class="resimdiv">
                <img class="resim" src="../resimler1/BTKresimler2 (1).jpg" alt="coherentgames" title="Coherent Games"> 
            </div>
            <h1>BA?LIK</h1>
            <p class="metin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sit provident, cupiditate, reprehenderit dolore doloremque reiciendis ipsam quos hic, eum beatae sed quibusdam maiores repellendus dolor adipisci nostrum? Labore doloremque cupiditate ratione quibusdam, vel architecto ducimus officiis laborum tempora ipsa, qui omnis molestiae quia, quae voluptate facere accusantium excepturi? Soluta, est alias odit, qui fugiat quibusdam dolorem beatae omnis, ut similique repellat maxime eveniet doloribus nulla quas repellendus hic enim? Eveniet laboriosam praesentium pariatur repellendus placeat! Harum facilis fugit maiores! Culpa maiores repellendus corrupti. Nulla nesciunt dignissimos porro ratione dolorum eos natus illo molestiae aliquid distinctio facere sapiente, placeat perferendis mollitia assumenda voluptas, cumque qui architecto odit laborum alias. Eum, dolores. Odit, magnam quia. Cupiditate aut eius molestiae eaque eum assumenda aliquam sapiente voluptatum minus?</p>
        </article>

uj5u.com熱心網友回復：

您可以使用這一額外的行...

.resim{
    float:left;
    width: 100px;
    padding-right: 12px;

}

但不要忘記填充也適用于所有螢屏尺寸，除非您在媒體查詢中另有說明。

如果您將水平空間保持原樣，它也應該效果最好，但如果您最終希望它消失，我認為差異會出現在以像素為單位的影像高度和line-height文本高度之間。

uj5u.com熱心網友回復：

您必須小心消除影像下方的一些空間，因為浮動系統將對字體大小/行距進行計算，以確保有足夠的空間在下方放置一行文本而不會出現字符頂部隔斷。

但是，垂直空間不會出現相同的問題，因此您可以為此使用邊距。

可以在圖片的垂直位置上稍微擺弄一下，以嘗試使事物不那么松散，看起來更“平衡”。

此代碼段通過將影像作為其父級的背景（因為似乎沒有真正的理由將其作為文本流中的實際影像）并通過一些填充和背景的輕微向下變換設法關閉我嘗試過的設備上的差距，同時確保下面的字符沒有被覆寫。注意：如果字體大小發生變化，您必須多考慮 px 值（或轉換為 em）。

.resimdiv {
  float: left;
  margin: 5px 10px 0 0;
  background-image: url(https://i.stack.imgur.com/cT6PN.jpg);
  background-size: cover;
  width: 100px;
  height: 100px;
  transform: translateY(8px);
}

.resim {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.metin {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11px;
  color: red;
}

h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  position: relative;
  top: 5px;
  font-size: 20px;
}

p {
  position: relative;
  top: 5px;
}

<article id="icerik">
  <div class="resimdiv"></div>
  <h1>BA?LIK</h1>
  <p class="metin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sit provident, cupiditate, reprehenderit dolore doloremque reiciendis ipsam quos hic, eum beatae sed quibusdam maiores repellendus dolor adipisci nostrum? Labore doloremque cupiditate ratione
    quibusdam, vel architecto ducimus officiis laborum tempora ipsa, qui omnis molestiae quia, quae voluptate facere accusantium excepturi? Soluta, est alias odit, qui fugiat quibusdam dolorem beatae omnis, ut similique repellat maxime eveniet doloribus
    nulla quas repellendus hic enim? Eveniet laboriosam praesentium pariatur repellendus placeat! Harum facilis fugit maiores! Culpa maiores repellendus corrupti. Nulla nesciunt dignissimos porro ratione dolorum eos natus illo molestiae aliquid distinctio
    facere sapiente, placeat perferendis mollitia assumenda voluptas, cumque qui architecto odit laborum alias. Eum, dolores. Odit, magnam quia. Cupiditate aut eius molestiae eaque eum assumenda aliquam sapiente voluptatum minus?</p>
</article>

標籤：html css

上一篇：如何設計一組物件

下一篇：我該如何解決這個colspan問題？