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;
}
答
这是因为<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>
预览
我道歉,不接受的答案越快,我不知道我应该......在计算器还是新大声笑。我想我给你发了一封感谢信,如果它没有通过 - 非常感谢你的回复! – Ingo
@Ingo当然......任何时候......':D'你发信息到哪里了? –