Question

我得到了代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">
* {padding: 0px;margin: 0px;}
body {width:100%}
img.logo{width:80%;margin-left:10%;margin-right:10%;}
div.down{width:80%;margin-left:10%;margin-right:10%;}
.bar{width:10%; height:100%; float:left}
.cent{width:80%; float:left}
</style>

<body>
<img class="logo" src="logo.gif"/>
<div class="down">
<img class="bar" src="bar.jpg"/>
<div class="cent">lol</div>
<img class="bar" src="bar.jpg"/>
</div>

</body>

</html>

然而，在logo和down div之间我得到了空白区域。这是我的问题：它是如何实现的？（我的图像没有白色边框）

Answer 1

问题是你的图像是一个内联元素，如果你想隐藏空间，可以向它添加一个display：block语句，这也是受浏览器显示模式影响的东西

http://www.quirksmode.org/css/modes/imgdisplay_quirks.html

Answer 2

将display:block添加到img：

img.logo { width:80%; margin-left:10%; margin-right:10%; display: block; }

呈现的白色空间但未写入

2 个答案: