html中常见的小问题（1）
問題：自適應(yīng)高度的塊級(jí)元素內(nèi)添加圖片后，其高度會(huì)比圖片高度多出一塊
簡(jiǎn)單代碼如下：
?
<!doctype html> <html><head><style>.box{width:533px;margin:100px auto;border:1px solid red;}</style></head><body><div class="box"><img src="http://f.hiphotos.baidu.com/image/h=300/sign=12e703ffa5ec8a130b1a51e0c7029157/c75c10385343fbf2f7da8133bc7eca8065388f2f.jpg" width="533px" height="300px" alt="美女"/></div></body> </html>?
效果圖如下：
1、我們可以發(fā)現(xiàn)div的高度比圖片的高度多出來了幾個(gè)像素，這是為什么呢？
這是因?yàn)閕mg標(biāo)簽為行塊級(jí)標(biāo)簽，它既有塊級(jí)標(biāo)簽的特性，也有行級(jí)標(biāo)簽的特性。這就需要我們理解行級(jí)標(biāo)簽中vertical-align屬性各個(gè)值的含義了，通常它的默認(rèn)值為baseline(基線)，而baseline和bottom之間是有一定距離的，由于這個(gè)距離的存在才造就了這塊空白的存在，只要是圖片屬性是display:inline-block,這塊空白就會(huì)存在。
2、我們一般怎么解決呢？
（1）給img標(biāo)簽添加display:block屬性
（2）給img標(biāo)簽添加vertical-align:top;屬性
（3）給div標(biāo)簽添加line-height:0或者font-size:0;屬性
（4）給定div標(biāo)簽寬度和高度，然后添加overflow:hidden;屬性
（5）給img標(biāo)簽添加float:left屬性，通常用于圖片和文字的混合排列
總結(jié)：行級(jí)標(biāo)簽?zāi)J(rèn)是和父級(jí)元素的baseline（基線）對(duì)齊的，而父級(jí)的baseline（基線）和其bottom（底邊）之間又是有距離的，所以我們通常給行內(nèi)標(biāo)簽添加vertical-align:top/align:top/middle/bottom任意一個(gè)值就可以解決這個(gè)問題;其他解決方案視情況而定；
?
總結(jié)
以上是生活随笔為你收集整理的html中常见的小问题（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Css Secret 案例Demo全套
- 下一篇： input复选框checkbox默认样式