[CSS] box model

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

box model圖示：

所有的html標籤裡除了內文之外，都還包含了padding(內距)、border(邊框)、邊距(margin)。

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

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

  
    
      
      
    
    
    
      
段落1
      
段落2
    
  

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

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

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

即將.para兩個

元素改成行內區塊(display:inline-block;)元素，顯示結果如下：中間的margin會變成100px(50px + 50px)，瞭解其差異性了嗎？

三、行內元素(例：)：如果是行內元素(display:inline;)，設定margin-top、margin-bottom、padding-top、padding-bottom會無效。後續會另開專文撰寫關於display屬性。