gpt4 book ai didi

html - 为什么这个 css/html 显示额外的填充?

转载 作者:太空宇宙 更新时间:2023-11-03 20:19:16 27 4
gpt4 key购买 nike

在过去的几天里,我一直在努力解决我正在构建的网站上的一些奇怪的间距问题。最初,我认为这是 Chrome 的显示问题,但我已经能够在 IE8、IE9、Firefox 和 Safari 中重现该问题。我使用旧式 HTML/CSS 是为了向后兼容,所以我可以说这不是 IE 处理 HTML5 或其他一些前沿更新。

虽然一些在线解决方案让我尝试了不同的方法,包括 float hedad,但没有任何成功,而且我总是在其中一个长边上填充。

我已将其精简到最基本的要素以重现该问题,并附上了我可以看到的填充的屏幕截图。如果有另一双或七双眼睛向我展示我错过的东西,我当然会感激不尽。

编辑:行高原来是这个问题的罪魁祸首,但根据建议将图像垂直对齐到顶部,将 文本 留在了 div 的顶部。我的感觉是 header 标签会保留默认值,但 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;
}

我的输出如下所示

screen capture

这是 bluespacer.gif; 1 像素 x 1 像素。仔细看,它就像一个尘埃!

( bluespacer.gif ) <---

最佳答案

你看错地方了。产生空白的不是填充而是行高。

尝试垂直对齐图像:

#header img {
vertical-align: bottom;
}

说明:在默认样式中,图像位于文本的基线上。也就是说,下边缘大致与字母“x”的下边缘对齐。但是因为文本有下部(如“g”或“j”),所以周围的框被绘制得更高,这导致图像下方有额外的空间。

关于html - 为什么这个 css/html 显示额外的填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13933572/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com