HTML严格与CSS：我如何缩小差距？

在下面的网页中，图像和div之间有几个像素的间隙。（我已经在Firefox 3和Safari 4中测试过。）HTML严格与CSS：我如何缩小差距？

我该如何缩小差距？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css" media="screen"> 
     body 
     { 
      background-color: black; 
     } 

     img 
     { 
      width: 250px; 
      height: 70px; 
      border: 0; 
      margin: 0; 
      padding: 0; 
     } 

     div 
     { 
      background-color: white; 
      border: 0; 
      margin: 0; 
      padding: 0; 
     } 

    </style> 
</head> 

<body> 

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"> 
<div>text</div> 

</body> 
</html>

来源

2009-03-03 Patrick McElhaney

图像是内嵌元素，所以它放置在文本行的基线。间隔是基线和文本行底部之间的距离（即，用于悬挂诸如“g”和“j”的字符的基线以下所需的空间）。

使图像块元素，而且差距会消失：

display: block;

来源

2009-03-03 21:50:52 Guffa

删除图像标记和div标记之间的换行符。

来源

2009-03-03 21:49:25

这不应该是解决办法，但遗憾的是，它是 – sblundy 2009-03-03 21:50:23

这不会在Safari工作。。但是，Guffa的回答是。 – Chuck 2009-03-03 21:55:02

在Firefox中也不起作用。 – 2009-03-03 22:15:16

删除<img>行和<div>行之间的HTML中的换行符。

为什么是的，这令人讨厌HTML处理换行符为空格。

来源

2009-03-03 21:49:47

变化：

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"> 
<div>text</div>

到：

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"><div>text</div>

来源

2009-03-03 21:50:37

添加display: block您<img>无论是在CSS或样式属性。

编辑 Guffa击败了我以上。

您也可以将<img>换成<div>，从技术上讲，在这种情况下您应该做任何事情。如果我记得HTML规范的话，只有块级元素可以是<body>的后代。然后，您可以灵活地在该div内添加更多图像（只要在<img>和</div>之间没有空白区域，您应该可以轻松前往

来源

2009-03-03 21:51:42

显示区块对我不起作用。但这并给它一个负边距值 - 有效的CSS

img { 
width : 250px; 
height : 70px; 
border : 0; 
margin-top : -11px; 
margin-left : -22px; 
padding : 0; 
}

根据需要调整

来源

2009-06-03 13:35:20

HTML严格与CSS：我如何缩小差距？

回答

相关问题