資訊專欄INFORMATION COLUMN
摘要：前言之前在寫網頁的時候有一個展示圖片的需求我使用一個包裹一個但是在瀏覽器中預覽的時候碰到了一下的問題仔細看圖片和之間有間隙。正文指定了行內元素或表格單元格元素的垂直對齊方式摘錄自。設置父元素字體大小為所用的值是無單位數值乘以元素的。
前言
之前在寫網頁的時候有一個展示圖片的需求,我使用一個div包裹一個img,但是在瀏覽器中預覽的時候碰到了一下的問題,
仔細看,圖片和div之間有間隙。
下面貼上簡易的代碼
.content{
float:left;
margin:100px auto;
background:pink;
}
我外層容器content設置浮動,按浮動元素會收縮的原理,本不應該出現這條粉色的間隙,但為什么這里會有呢？之后去網上查了一下,其中涉及到了line-height以及vertical-align的問題。
正文vertical-align
vertical-align 指定了行內（inline）元素或表格單元格（table-cell）元素的垂直對齊方式(摘錄自MDN)。
vertical-align的取值中有top、middle、baseline、bottom四個值,他們分別對應了
vertical-align中默認值是baseline也就是說圖片的下邊緣其實是和藍色那條線對齊的,而文字元素本身也有高度,所以會多出那么一部分空白的地方，也就是底部綠色線到藍色線之間的距離。
那么為什么在沒有文字的情況下圖片也會有底部的間隙,那是因為在HTML5文檔聲明下，塊狀元素內部的內聯元素的行為表現，就好像塊狀元素內部還有一個（更有可能兩個-前后）看不見摸不著沒有寬度沒有實體的空白節點(摘錄自張鑫旭的博客),所以默認vertical-align為baseline的圖片會和父div之間存在空隙。
知道這一點，現在問題就好解決了，最直接的可以是
img{
vertical-align:bottom;//middle和top也都可以
}
前面正文的開頭說過vertical-align是設置行內（inline）元素或表格單元格（table-cell）元素的垂直對齊方式,所以設置img為塊級元素時就不會存在baseline對齊的問題了。
img{
display:block
}
.content{
float:left;
margin:100px auto;
background:pink;
font-size:0px;
}
The used value is this unitless?[
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)?multiplied by the element"s font size. The computed value is the same as the specified?
. In most cases?this is the preferred way?to set?line-height
with no unexpected results in case of inheritance.?
**所用的值是無單位數值[
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)乘以元素的font size。計算出來的值與使用數值指定的一樣。大多數情況下，使用這種方法設置line-height是首選方法，在繼承情況下不會有異常的值。** (摘錄自MDN)
line-height在不設置單位時是通過與font-size相乘來計算的,設置font-size為0,line-height也為0,而那一端多余的間隙(baseline和bottom之間的差值)也和line-height有關，所以自然而然間隙就消除了。
結尾這是我解決img與父div空隙中的一點總結,其實深挖了line-height和vertical-align還有更多的內容,我一下子消化不過來,今天先到這里,日后有更深入了解了再慢慢補充,以上內容有錯誤的地方歡迎小伙伴們來拍磚。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115020.html
摘要：我認為應該將理解為。如果的值是，高度就是等于。中所有的最高點以及最低點決定了它的高度該計算包括了的高度，后文會提到。非替換元素的的，以及并不會影響高度的計算。并不是兩條之間的距離。元素的垂直中點位置與父元素的基線加上一半的位置對齊。 文章 GitHub 地址：https://github.com/afishhhhh/blog/issues/4文章如有錯誤，請各位能夠指出。 幾個概念 ...
摘要：我認為應該將理解為。如果的值是，高度就是等于。中所有的最高點以及最低點決定了它的高度該計算包括了的高度，后文會提到。非替換元素的的，以及并不會影響高度的計算。并不是兩條之間的距離。元素的垂直中點位置與父元素的基線加上一半的位置對齊。 文章 GitHub 地址：https://github.com/afishhhhh/blog/issues/4文章如有錯誤，請各位能夠指出。 幾個概念 ...
閱讀 2942·2023-04-26 01:32
閱讀 1541·2021-09-13 10:37
閱讀 2278·2019-08-30 15:56
閱讀 1669·2019-08-30 14:00
閱讀 3043·2019-08-30 12:44
閱讀 1961·2019-08-26 12:20
閱讀 1056·2019-08-23 16:29
閱讀 3227·2019-08-23 14:44
