CSS盒模型

基本概念

网页设计中常听的属性名：内容（content）、内边距（padding）、边框（border）、外边距（margin），CSS盒子模型都具备这些属性。
CSS盒模型就是在网页设计中经常使用到的CSS技术所使用的一种思维模型。(百度百科)

• 内容区域是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部。
• 内边距区域延伸到包围padding的边框。如果内容区域设置了背景、颜色或者图片，这些样式会延伸padding上。（内边距与内容边界之间的空间可以由padding-top,padding-right,padding-bottom,padding-left和简写的padding控制）
• 边框区域是包含边框的区域，扩展了内边距的区域。它位于边框边界内部。（由border-width以及简写的border控制）
• 外边距区域用空白区域扩展边框区域，以分开相邻的元素。（由margin-top,margin-right,margin-bottom,margin-left以及简写的margin控制）
  在外边距合并的情况下，盒之间是共享边距的。（边距以大的为准）
  对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由line-height属性决定
  参见MDN web docs
  
  

  标准模型
  
  盒模型的宽高只是内容（content）的宽高，而整个盒子的宽高是内容的宽高+内边距的宽高+边框宽高+外边距的宽高。