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标题元素有额外空间

回答

相关问题