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>

CSS inline-box and auto margin

line-height只对内联元素有效，对于块元素设置其实是作用在其内部的内联元素上。
水平七属性中margin-left、margin-right、width的值可以设置为auto，其他四个属性不能设置为auto。
水平七属性相加的值总是等于其父元素的width值。
margin的值可以取负值，padding和width不能取负值。
一行中，不同内联元素的内联框位置并不一定相同，根据line-hight、font-size计算，并受vertical-align影响。以下公式在vertical-align基于baseline的计算方法：
内联框的上边框位置：font-size - (font-size - line-height) / 2
内联框的下边框位置：font-size + (font-size - line-height) / 2
行间距等于该行中所有内联元素的内联框(inline-box)的最高位置减最低位置。