css盒模型 内边距和外边距

所谓盒子模型:

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

pink总结:

盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组
成。
盒子里面的文字和图片等元素是内容区域
盒子的厚度 我们成为 盒子的边框
盒子内容与边框的距离是内边距（类似单元格的cellpadding)
盒子与盒子之间的距离是外边距（类似单元格的cellspacing)

标椎盒子模型：

盒子的边框：

语法：border：border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框的颜色

边框的样式:
o none:没有边框即忽略所有边框的宽度(默认值)
o solid:边框为单实线(最为常用的)
o dashed:边框为虚线
o dotted:边框为点线

边框的综合设置

border：border-width || border-style || border-color
border：1px solid red；没有顺序

盒子边框写法总结表

上边框	下边框	左边框	右边框
bored-top-style；样式；	bored-bottom-style；样式；	border-left-style：样式；	border-right-style：样式
bored-top-width；宽度；	bored-bottom-width：宽度；	border-left-width：宽度；	border-right-width；宽度
bored-top-color；颜色；	bored-bottom-color：颜色；	border-left-color：颜色；	border-right-color：颜色
bored-top：宽度，样式，颜色；	bored-bottom：宽度，样式，颜色；	border-left：宽度，样式，颜色；	border-right：宽度，样式，颜色；

表格的细线表格

通过表格的cellspacing=“0” ,将单元格与单元格之间的距离设置为0,
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过css属性:

table{ border-collapse:col1apse; }

collapse 单词是合并的意思
border-collapse:collapse; 表示相邻边框合并在一起。

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。
padding-left 左内边距 padding-right 右内边距
padding-top 上内边距 padding-bottom 下内边距

值得个数	表达意思
1个值	padding：上，下，左，右内边距
2个值	上下内边距，左右内边距
3个值	上内边距，左右内边距，下内边距
4个值	上内边距，右内边距，下内边距，左内边距