margin&border&padding的用法

一、外边距margin

使用

• 可以用来设置盒子与盒子之间的间距——外边距

• 语法

margin-top：上外边距

margin-bottom：下外边距

margin-left：左外边距

margin-right：右外边距

复合属性：margin

当margin为一个值时表示盒子与盒子之间的上下左右间距

当margin为两个值时表示盒子与盒子之间的间距的上下，左右间距

当margin为三个值时表示盒子与盒子之间的间距的上，左右，下间距

当margin为四个值时表示盒子与盒子之间的间距的上，右，下，左间距

二、使用技巧

（1）margin是可以设置负值

（2）盒子水平居中

margin:0 auto；这一属性，可以设置盒子水平居中，设置上下外边距为0px，左右为auto，auto代表自适应，会自动将父标签剩余分空间均分到盒子左右两边。【针对有宽度的块级标签有效果】

注意：

垂直方向上auto被禁用，原因在于一般父标签的高度是由内容决定的，高度无法确定的，W3C将垂直方向上的auto禁用了

（3）盒子水平垂直居中

• 水平居中：margin:0 auto;

• 垂直居中：margin-top:(父标签的高度-子标签的高度) 或 margin-top:calc(50% - 小盒高度的一半)

  • calc（）可以进行数学运算，运算符号前后添加空格
  • margin-top:calc(50% - 小盒子高度的一半)只适用于父标签的高度和宽度一样时

（4）margin设置百分比

• margin设置百分比时，无论哪个方向，都是参考父标签的宽度。

（5）margin传递性

• 子标签在设置margin-top时，会传递给父标签显示

• 原因：子标签在设置margin-top时，会去找父标签的边界作为参考，找不到父标签的边界，就传递给父标签显示

  解决方案：
  • 可以给父标签设置边框border，但是会改变盒子的大小        
  • 可以给父标签设置内边距padding，但是会改变盒子的大小
  • 可以给父标签设置overflow:hidden，借助BFC容器的特点，容器里面的元素不会影响容器外面元素的布局。（推荐）

（6）margin重叠性

• 相邻两个盒子在垂直方向上的margin会发生重叠，以值大的为准；在水平方向上，margin不会发生重叠，是相加在一起的。

三、边框border

使用

• 可以设置标签（盒子）四周的边框，主要研究：边框的方向、宽度、类型、颜色。

• 语法

border-方位单词-width：边距宽度

border-方位单词-style：边距类型

border-方位单词-color：边距颜色

复合属性：

可以设置一条边的复合属性

border-方位单词：宽度 类型 颜色；

也可以同时设置四条边框的复合属性

border：宽度 类型 颜色；

类型：

solid：实线

dashed：虚线

dotted：点线

double：双实线

注意：

• 边框至少需要设置两个值：宽度和类型，颜色默认为黑色

• 默认边框区域会铺设背景颜色

• 添加边框会改变盒子的大小

• 渲染原理：如果只设置一条边框，显示为矩形；如果有相邻的边框，两条边界相接部分是沿着对角线区域均分

  可以绘制三角形：设置盒子的宽高为0，三条边框设置为透明的颜色，一条边框不透明（transparent）：透明色

四、内边距padding

使用

• 设置盒子中内容与边框之间的间距

• 语法

padding-top：上内边距

padding-bottom：下内边距

padding-left：左内边距

padding-right：右内边距

复合属性：padding

当padding为一个值时表示内容与边框之间的上下左右间距

当padding为两个值时表示内容与边框之间的间距的上下，左右间距

当padding为三个值时表示内容与边框之间的间距的上，左右，下间距

当padding为四个值时表示内容与边框之间的间距的上，右，下，左间距

注意：

• 内边距padding区域默认会铺设背景颜色
• 内边距padding会改变盒子的大小