[CSS] box model

相信會寫CSS的同好們,一定對CSS不陌生,但box model在CSS的角色裡扮演著非常垂要的地位,如果你是初學者,務必搞懂:全部的html元素,都是box model概念。學會之後,未來在css對html的調效中,都將非常有幫助。

box model圖示:
box model
所有的html標籤裡除了內文之外,都還包含了padding(內距)、border(邊框)、邊距(margin)。

另外值得注意的:
一、css裡的width屬性指的是包含了哪部份:僅包含段落(即白色區域)。所以其實整個元素的總寬度=width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

二、當兩個html元素碰在一起時,邊距該如何算呢:

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <style>
      .para{
        border:50px solid black;
        width:50px;
        padding:50px;
        margin:50px;
      }
      </style>
    </head>
    
    <body>
      <p class="para">段落1</p>
      <p class="para">段落2</p>
    </body>
  </html>

以上html及css原始碼顯示結果如下圖:會發現上下兩個的margin會被合併成只有50px,而不是100px。事實上是會取較大一個margin數值。
邊距上下差50px

但如果將.para這個css改成以下:

.para{
  border:50px solid black;
  width:50px;
  padding:50px;
  margin:50px;
  display:inline-block;
}

即將.para兩個<p>元素改成行內區塊(display:inline-block;)元素,顯示結果如下:中間的margin會變成100px(50px + 50px),瞭解其差異性了嗎?
邊距差100px

三、行內元素(例:<span>):如果是行內元素(display:inline;),設定margin-topmargin-bottompadding-toppadding-bottom會無效。後續會另開專文撰寫關於display屬性。