盒子模型/设置边框/内边距、外边距

盒子模型

在HTML中，浏览器在解析每一个标签元素时，都会将标签解析成一个装东西的盒子，超文本标记语言中，内容本身就定义在标签内部的。它将标签解析一个一个盒子，盒子之间存在间距，盒子内部装的东西与盒子之间也存在间距，并且盒子本身也是存在边框的。

盒子本身的边框也就是(边框border )，盒子和盒子之间的距离也就是(外边距 margin ) ，盒子到内容之间的距离也就是(内边距padding )，剩下中间的就是内容（content）。

当外边距越大，盒子和盒子之间的距离就越大；当内边距越大，边框和内容之间距离就越大，相对而言，内容就越少。所以合理设置margin和padding是非常重要的。换句话说：一个元素的真实高度和真实宽度，并不仅仅由我们大家设置的width和 height来决定，还应该包括内边距，边框宽度，以及外边距来决定。

边框：我们可以通过border等其他的衍生属性来进行设置；内边距：我们就需要使用paddinq或者它衍生属性来进行设置；外边距：我们可以通过使用magin或者它的衍生属性进行设置。

boder设置边框

要显示边框，比如div这种，那么必须要设置broder-style，否则默认是没有边框的。

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width
border-style
border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

例如：

border: medium double rgb(250,0,255);

属性：

值	描述
border-width	规定边框的宽度。参阅：border-width 中可能的值。
border-style	规定边框的样式。参阅：border-style 中可能的值。
border-color	规定边框的颜色。参阅：border-color 中可能的值。
inherit	规定应该从父元素继承 border 属性的设置。

magin属性设置外边距

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明：

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

例子 1

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

例子 2

margin:10px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

例子 3

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

例子 4

margin:10px;

所有 4 个外边距都是 10px

属性值：

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

它还有一些衍生属性，单独设置，比如：margin-top、margin-left等等

padding属性设置内边距

设置内边距我们要使用padding属性进行设置。

padding 简写属性在一个声明中设置所有内边距属性。

说明：

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值。

例子 1

padding:10px 5px 15px 20px;

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

例子 2

padding:10px 5px 15px;

上内边距是 10px

右内边距和左内边距是 5px

下内边距是 15px

例子 3

padding:10px 5px;

上内边距和下内边距是 10px

右内边距和左内边距是 5px

例子 4

padding:10px;

所有 4 个内边距都是 10px

属性值：

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

它还有一些衍生属性，单独设置，比如：padding-top、padding-left等等