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

盒子模型

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

 

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

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

 

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

 

boder设置边框

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

 

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

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

1. border-width
2. border-style
3. 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等等