White space rendered but not written
I got code:
<!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>
However betw开发者_运维知识库een logo and down div I got white space. And here's my question: How did it get there? (my images are without white borders)
The thing is that your image is an inline element, if you want to hide the space add a display:block statement to it, also this is something that is affected by the display mode of the browser
http://www.quirksmode.org/css/modes/imgdisplay_quirks.html
Add display:block to your img:
img.logo { width:80%; margin-left:10%; margin-right:10%; display: block; }
加载中,请稍侯......
精彩评论