爲什麼這個HTML div在下面有額外的空間但不在

我無法弄清楚這個空間來自哪裏。從這個小提琴中可以看到，<header>和<main>部分之間有一些空白區域。它也似乎是在底部的主要部分添加空間，但不在任何一個的頂部。爲什麼這個HTML div在下面有額外的空間但不在

HTML：

<header> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg"> 
</header> 
<main> 
    Main Section 
</main>

來源

2015-02-07 Chipe

這是因爲的img標籤是內嵌在默認情況下和空間的下行字母（以字符 'P' 基線， 'Q' 等下面的部分）。

header img { 
    width: 100%; 
    display: block; 
}

來源

2015-02-07 05:18:18 Richard

爲了進一步說明這一點，如果您將'line-height：0;'設置爲標題，您將看到相同的效果。 – Robert 2015-02-07 05:22:19

感謝您的解釋！我沒有意識到這是默認的內聯。這將解釋它！謝謝您的幫助！ – Chipe 2015-02-07 05:24:27

從圖像的下方的空間，避免這個空間，你需要在header img或添加display:block或float:left設置的height：

您可以通過改變IMG的塊解決這個問題既<header>和<img>。，

header{ 
    width:100%; 
    height:100px; 
} 
header img{ 
    width:100%; 
    height:100%; 
}

或

header img{ 
    width:100%; 
    display:block;/*added*/ 
}

或

header img{ 
    width:100%; 
    float:left;/*added*/ 
}

jsfiddle

來源

2015-02-07 05:18:45 Sathish

-1

您可以指定一個負值，填充，底部來處理..

來源

2015-02-07 05:20:02

我不明白投票的原因..這工程..其他的解決方案可以更好，但爲什麼投票的東西其他工作太.. ..？ – 2015-02-07 05:33:27

請提供一個jsfiddle或類似的證明它的工作原理。 – Alohci 2015-02-07 09:48:34

看到Demo

可以設置高度標頭的等於高度IMG的 ..

header{ 
    width:100%; 
    height: 112px; 
}

來源

2015-02-07 05:22:02 mehdi

只需更改標題

header 
{ 
    width: 100%; 
    float: left; 
}

enter image description here

的CSS，你可以看到

來源

2015-02-07 05:23:56 Kashyap

簡單.... 只是用display:block;圖像

http://jsfiddle.net/sarowerj/drmsLp17/

來源

2015-02-07 06:12:34

爲什麼這個HTML div在下面有額外的空間但不在

回答

相關問題