IMG is an inline element
<head>
<style type="text/css">
#div1, #div2 {
border: #333 1px solid;
background-color: #333;
height: 300px;
}
#img1 {
display: block;
}
#img2 {
vertical-align: sub; /* bottom, middle */
}
</style>
</head>
<body>
<div id="div1"><img id="img1" src="/images/puzzle1.jpg"/></div>
如果img对象不设置一下display或者vertical-align等属性，会在div底部多出一点空白，
这个就是因为img是一个inline element。
<div id="div2"><img id="img2" src="/images/puzzle2.jpg"/></div>
</body>
No comments :
Post a Comment