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

• CSS间距
  • 内补白
  • 外补白
• 盒子模型

CSS间距

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

内补白

设置元素的内间距

• 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 内补白