基本概念

網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin），CSS盒子模型都具備這些屬性。
CSS盒模型就是在網(wǎng)頁設(shè)計中經(jīng)常使用到的CSS技術(shù)所使用的一種思維模型。(百度百科)

• 內(nèi)容區(qū)域是包含元素真實內(nèi)容的區(qū)域。它通常包含背景、顏色或者圖片等，位于內(nèi)容邊界的內(nèi)部。
• 內(nèi)邊距區(qū)域延伸到包圍padding的邊框。如果內(nèi)容區(qū)域設(shè)置了背景、顏色或者圖片，這些樣式會延伸padding上。（內(nèi)邊距與內(nèi)容邊界之間的空間可以由padding-top,padding-right,padding-bottom,padding-left和簡寫的padding控制）
• 邊框區(qū)域是包含邊框的區(qū)域，擴展了內(nèi)邊距的區(qū)域。它位于邊框邊界內(nèi)部。（由border-width以及簡寫的border控制）
• 外邊距區(qū)域用空白區(qū)域擴展邊框區(qū)域，以分開相鄰的元素。（由margin-top,margin-right,margin-bottom,margin-left以及簡寫的margin控制）
  在外邊距合并的情況下，盒之間是共享邊距的。（邊距以大的為準）
  對于非替換的行內(nèi)元素來說，盡管內(nèi)容周圍存在內(nèi)邊距與邊框，但其占用空間（行高）由line-height屬性決定
  參見MDN web docs
  
  標準模型
  
  盒模型的寬高只是內(nèi)容（content）的寬高，而整個盒子的寬高是內(nèi)容的寬高+內(nèi)邊距的寬高+邊框?qū)捀?外邊距的寬高。