很多时候我们为了美不雅观，需要对内容进行留白设置，，这时候就需要设置间距了。

内补白

设置元素的内间距

padding： 检索或设置东西四边的内部边距

padding:10px;

上下及两边设置

padding:5px 10px;

由上界限开始，顺时针设置

padding:10px 20px 30px 40px

单边设置

padding-top： 检索或设置东西顶边的内部边距

padding-right： 检索或设置东西右边的内部边距

padding-bottom：检索或设置东西下边的内部边距

padding-left： 检索或设置东西左边的内部边距

外补白

设置元素的外间距

将padding换成margin，用法同上

注意: 在使用padding与margin的时候,会转变我们元素的实际巨细

解决方案

margin相关技巧

设置元素程度居中： margin:x auto;

上要领只能用于程度居中，不成用于垂直居中

margin负值可以让元素位移及边框合并

盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比方，辅佐我们设置元素对应的样式。

把元素叫做盒子，设置对应的样式分袂为：

盒子的边框(border)

盒子内的内容和边框之间的间距(padding)

盒子与盒子之间的间距(margin)。

盒子真实尺寸

盒子宽度 = width + padding摆布 + border摆布

盒子高度 = height + padding上下 + border上下

在构造中，如果我想增大内容和边框的距离，又不想转变盒子显示的尺寸

box-sizing: content-box 外补白

box-sizing: border-box 内补白

CSS中的间距设置与盒子模型