刪除inline-block元素間的空白間距

使用inline-block來代替float的案例很多。

但使用後最常碰到的問題是在inline-block的元素之間會有個「4px」的空白間距。

處理方法很簡單，目前最通用的方法是在inline-block的父元素上加上font-size: 0，然後在inline-block元素加上原本要顯示的font-size例如font-size: 16px。

附上範例：remove inline-block spacing

CSS Float 與 CSS Hack Clearfix

常常聽到float就要配上clearfix，但是為什麼呢？

子元素浮動到上層之後，在某些情況下會造成所謂「父元素的高度塌陷」，也就是原本包住子元素的容器會因為子元素全部都浮動脫離原有的DOM序，造成高度預設為auto的父元素「沒有內容」而失去高度。

附上範例：How clearfix works

SASS：
.clearfix
  &:before
    content: ""
    display: table
  &:after
    content: ""
    display: table
    clear: both
  zoom: 1


CSS：
.clearfix, {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}