消除切版間隙

切版常見問題

區塊無法依照%數順利填滿版面,中間不知為何産生空隙,導致元素掉下來

.container
 .a width 70%
 .b height 30%
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955

.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)

.a
 width: 70%

.b
 width: 30% 
Display
width 70%
height 30%

解決方法

  1. 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來。
  2. display: inline-block,元素水平排列。
    詳細請看這篇文章
  3. box-sizing: border-box→外框框線尺寸包在框元素之内。
    詳細請看這篇文章
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955
 // 1 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來
 font-size: 0px
.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)
 font-size: 18.4px
 // 3 外框框線尺寸包在框元素之内
 box-sizing: border-box
 // 2 元素水平排列
 display: inline-block
.a
 width: 70%
.b
 width: 30%     
Display
width 70%
height 30%

Leave a Reply

Your email address will not be published. Required fields are marked *