關於 Box Model(區塊模型)

在我們在討論 CSS 寬度時,不得不提到關於 Box Model 的議題。當你設定了元素的寬度,實際顯示的元素卻能夠超出你的設定:因為元素的邊框(margin)和內距(padding)會撐開元素。看看下面的例子,我們設定了兩個樣式,這兩個樣式擁有相同寬度設定,但最後元素顯示的實際寬度卻不太一樣。

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}
<div class="simple">

我小一些...

</div>
<div class="fancy">

我比較大!

</div>

以前的人,大多人的解決方法都是靠數學運算,也就是負責撰寫 CSS 的人通常會設定比他實際想要得寬度還小一些,然後減去已知的內距和邊框的寬度。感謝主,你現在不需要再這麼做了...

  • Creative Commons License