HTML5標題元素有額外空間

我遇到問題，使用CSS格式化HTML5 <header>元素。看起來不管我做什麼，標題總是在高度尺寸上顯示比它包含的<img>元素大幾個像素。HTML5標題元素有額外空間

圖像都是相同的高度。在我的CSS中，我有一個CSS重置填充和邊距爲0，沒有邊距或填充分配給我的圖像或我的標題。使用Safari瀏覽器在Mac上渲染頁面，在Android智能手機上使用Chrome瀏覽器渲染頁眉，使圖像全部對齊頁眉頂部的文檔頂部，但頁眉始終在內容下方延伸幾個像素，幾乎像填充底部已被設置爲一些價值。

我的HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Responsive Template</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <header> 
    <img id="logo" src="images/csi_logo.svg" alt="csi logo"> 
    <img id="focus" src="images/home_icon.svg" alt="focus"> 
    <img id="hamburger" src="images/hamburger_icon.svg" alt="hamburger"> 
    </header> 
</body> 
</html>

我的CSS：

* { 
    margin: 0; 
    padding: 0; 
    font-size: 5vh; 
} 
header { 
    background-color: #444444; 
} 
#logo { 
    height: 10vh; 
} 
#focus { 
    height: 10vh; 
} 
#hamburger { 
    height: 10vh; 
    float: right; 
}

來源

2016-12-04 Ingo

這是因爲<img />標記對齊到baseline的性質。給：

vertical-align: middle; 
display: inline-block;

所有的圖像，它應該沒問題。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 5vh; 
 
} 
 
header { 
 
    background-color: #444444; 
 
} 
 
#logo { 
 
    height: 10vh; 
 
} 
 
#focus { 
 
    height: 10vh; 
 
} 
 
#hamburger { 
 
    height: 10vh; 
 
    float: right; 
 
} 
 
img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<header> 
 
    <img id="logo" src="//placehold.it/300x75?text=csi_logo.svg" alt="csi logo" /> 
 
    <img id="focus" src="//placehold.it/300x75?text=home_icon.svg" alt="focus" /> 
 
    <img id="hamburger" src="//placehold.it/300x75?text=hamburger_icon.svg" alt="hamburger" /> 
 
</header>

預覽

來源

2016-12-04 21:01:21

我道歉，不接受的答案越快，我不知道我應該......在計算器還是新大聲笑。我想我給你發了一封感謝信，如果它沒有通過 - 非常感謝你的回覆！ – Ingo

@Ingo當然......任何時候......'：D'你發信息到哪裏了？ –

HTML5標題元素有額外空間

回答

相關問題