在以下网页中,图像与div之间存在几个像素的间隙。 (我已在Firefox 3和Safari 4中测试过。)
如何缩小差距?
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;
}
<html>
<head>
<title>Test Page</title>
</head>
<body>
<img alt="Stack Overflow Logo" src="data:image/png;base64,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">
<div>text</div>
</body>
</html>
答案 0 :(得分:16)
图像是内联元素,因此它放在文本行的基线上。间隙是基线和文本行底部之间的距离(即,基线下方所需的空格,用于挂起“g”和“j”等字符。)
使图像成为块元素,间隙消失:
display: block;
答案 1 :(得分:5)
删除图片代码和div代码之间的换行符。
答案 2 :(得分:3)
在CSS或样式属性中将display: block
添加到<img>
。
编辑 Guffa打败了我以上。
你也可以用<img>
包裹<div>
,从技术上讲,在这种情况下你应该做。如果我记得正确的HTML规范,那么只有块级元素可以是<body>
的后代。然后,您可以灵活地在该div中添加更多图像(只要<img>
和</div>
的关闭之间没有空白区域,您应该很好。
答案 3 :(得分:2)
删除<img>
行和<div>
行之间HTML中的换行符。
为什么是这样,令人讨厌的是HTML将换行视为空格。
答案 4 :(得分:1)
变化:
<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>
答案 5 :(得分:0)
显示块对我不起作用,但确实如此。给它一个负的边际值 - 有效的CSS
img {
width : 250px;
height : 70px;
border : 0;
margin-top : -11px;
margin-left : -22px;
padding : 0;
}
根据需要进行调整。