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

原文地址:https://www.cnblogs.com/aduner/p/12207576.html