切版常見問題

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

.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% 

解決方法

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%