下空間<img>標簽

Question

我的照片下面無緣無故有這個煩人的空間。 我使用 www.getskeleton.com 作為框架。

HTML代碼

<div class="four columns bottom">
  <div class="box">
    <img src="images/picture.png" title="" alt="">
  </div>
</div>

CSS代碼

.box{
  border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}

Answer 1

雖然我確信這已經解決了，但我相信這些答案都不正確（或者至少，“接受”答案的鏈接已經死了）。

處理這個間距問題的方法（以及為什么它沒有在util庫中設置，例如normalize我不確定）是圖像的垂直對齊。 當使用HTML 5 doctype時，這將解決HTML頁面問題。 奇怪的是，當使用例如HTML 4.01 doctype時，圖像不會在行為下面顯示這個錯誤的空間。

修復：

img {
  vertical-align: top;
}

我希望能幫助那些可能遇到這個問題的人。

編輯：寫完這篇文章之后我注意到的一些額外信息，然后研究為什么normalize沒有在img標簽上設置對齊; 圖像的默認對齊方式是vertical-align: baseline; - 這是引入下面空間的行為。 Normalize的作者認為這種行為是跨瀏覽器的一致性，因此決定不對此進行“規范化”。 我想如果你希望文本坐在圖像旁邊與任何后續文本行正確對齊，那就更有意義了。 有些人還喜歡使用vertical-align: middle而不是top來解決這個問題 - 所以你可以隨意改變它。

然而，關於基線對齊，如果我的圖像太大而且高於線高，我可能會浮動它或其他一些行為......但是你去了。

我已經使用了垂直對齊的東西一段時間沒有任何事故。 但與往常一樣，請確保測試不再與基線對齊的圖像的任何影響。

Answer 2

試試這個：

.box img {
    display: block;
    padding: 0px;
    margin: 0px;
}

Answer 3

試試這個：.box {font-size：0; }

Answer 4

您的圖像需要浮動。 試試這個：

    #yourimage{
        float: left;}

Answer 5

如上所述，更多的信息會有很大的幫助，但我毫不懷疑它是填充，導致邊框走出圖像，原因很簡單就是

margin pushes outside the element
padding pushes inside the element

原樣。

然后修復：

.box {
    padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
    margin-bottom: 0px;
}

Answer 6

這是一個古老的怪癖 - 你的行格式化的空白導致了這個空白。 在圖像之后添加<br /> 。

Answer 7

嘗試這個

.box{
    display:flex
}