为什么这个css/html会显示额外的填充？
在过去的几天里,我一直在努力寻找我正在建设的网站上的一些奇怪的间距.最初,我认为这是Chrome的显示问题,但我已经能够在IE8,IE9,Firefox和Safari中复制该问题.我正在使用旧式的HTML/CSS来实现向后兼容性,所以我可以说这不是HTML处理HTML5或其他一些前沿更新.
虽然一些在线解决方案让我尝试了不同的东西,包括浮动hedad,没有什么是成功的,我总是在其中一个长边上填充.
我已经把它剥离到BAREST的基本要素来重现问题,并且包含了我可以看到的填充的屏幕截图.我真的很欣赏另一组或七只眼睛向我展示我错过的东西.
编辑:行高是这个的罪魁祸首,但垂直对齐图像到每个建议的顶部留下文本在div的顶部.我的感觉是header标签会保留默认值,但是标头中的img标签会覆盖它.或者我每个div只能有一个垂直对齐？
第二,有没有办法用CSS折叠行高？
HTML代码
<html>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="test.css">
</head>
<body>
<div id="header">
<img src="bluespacer.gif" height=125 width=400>
TEST
</div>
</body>
</html>
CSS代码
#header {
font: serif;
color: blue;
background-color: gray;
}
我的输出如下所示
这是bluespacer.gif; 1px x 1px.仔细观察,它就像一个灰尘斑点!
( 
)<---
你看错了地方.它不是填充而是行高,它会产生白色空间.
尝试垂直对齐图像:
#header img {
vertical-align: bottom;
}
说明:在默认样式中,图像放在文本的基线上.也就是说,下边缘大致与字母'x'的下边缘对齐.但是因为文本具有下行(如'g'或'j'),所以周围的框被绘制得更高,这导致图像下方的额外空间.
| 归档时间： |
|
| 查看次数： |
119 次 |
| 最近记录： |