CSS 框模型 (Box Model) 划定了元素框处置惩罚元素形式、内边距、边框 与 外边距 的法子。

CSS 框模型概述

元素框的最外部门是实际的模式，直接笼罩模式的是内边距。内边距出现了元素的后援。内边距的边缘是边框。边框以外是外边距，外边距默许是透明的，于是不会遮挡事后的任何元素。

暗示：后援使用于由形式和内边距、边框形成的周边。

内边距、边框与外边距但凡可选的，默许值是零。可是，许多元素将由用户署理样式表设置外边距与内边距。可以经由将元素的 margin 和 padding 配置为零来覆盖这些浏览器花式。这概略别离发展，也可使用普片抉择器对一切元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 与 height 指的是模式地域的宽度和高度。增加内边距、边框和外边距不会影响模式区域的尺寸，然则会增进元素框的总尺寸。

假如框的每个边上有 10 个像素的外边距与 5 个像素的内边距。如果希望这个元素框抵达 100 个像素，就需要将形式的宽度配置为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

暗指：内边距、边框与外边距可以或许应用于一个元素的所有边，也也许使用于单独的边。

提醒：外边距大约是负值，况且在得多情况下都要使用负值的外边距。