css常見問題（3）之inline block布局

2021-10-08 03:58:35 字數 539 閱讀 9108

當使用inline-block進行布局時，兩個塊元素之間會存在乙個幾px寬的縫隙。這是由於換行造成的空白符所引起的。為了**的美觀，兩個元素之間大多都是進行了換行的。

要處理這裡的間隙呢，有多種方法，1.最簡單的則是元素之間不換行，兩個元素在一行書寫，可以解決左右之間的間隙但是影響了**的美觀性，並且上下之間的間隙依舊存在。
2.其次是設定父元素的字型大小為0，上下左右的間隙都給解決了。

.divtest
3.還有很多魔改解決方法，比如可以使用vertical-align:middle解決。這樣可以解決上下的問題，但是左右的樣式就更加的不美觀。使用margin負值，絕對定位（沒有什麼是絕對定位解決不了的如果有那就算了）等等。

.divtest_one

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...