边距属性#

内边距#

• 内边距：边框与内容区域之间的距离。

  取值	示例	含义
  一个值	padding: num px;	上下左右
  两个值	padding: num px num px;	上下、左右
  三个值	padding: num px num px num px;	上、左右、下
  四个值	padding: num px num px num px num px;	上、右、下、左

  • padding-top 设置上内边距

  • padding-bottom 设置下内边距

  • padding-left 设置左内边距

  • padding-right 设置右内边距

• 内边距会影响盒子实际大小

  • 盒子内容大小(width/height) + 内边距(padding) + 边框(border)

  • 当我们给盒子指定 padding 值之后,发生了 2 件事情：

    • 内容和边框有了距离,添加了内边距。

    • padding影响了盒子实际大小。

      • 如果盒子已经有了宽度和高度,此时再指定padding,会撑大盒子。

      • 如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小。

      • Google盒模型:盒子真正的大小就是盒子内容(width/height)的大小

  • 解决方案：

    • 如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。

    • 盒子内减属性（CSS3盒子模型,加了border和padding,不需要手动减去,浏览器会自动计算多余大小,自动在内容中减去）

      1box-sizing: border-box;

  • 应用：

    • 通过设置左右内边距,实现导航栏文字间隔相同。

外边距#

• 外边距：边框以外,盒子与盒子之间的距离。

  取值	示例	含义
  一个值	margin: num px;	上下左右
  两个值	margin: num px num px;	上下、左右
  三个值	margin: num px num px num px;	上、左右、下
  四个值	margin: num px num px num px;	上、右、下、左

  • margin-top 设置上外边距

  • margin-bottom 设置下外边距

  • margin-left 设置左外边距

  • margin-right 设置右外边距

• 版心居中

  • 外边距可以让块级盒子水平居中的两个条件:

    • 盒子必须指定了宽度(width)。
    • 盒子左右的外边距都设置为 auto 。

  • 常见的写法,以下三种都可以:

    1margin-left: auto; margin-right: auto;
    2margin: auto;
    3margin: 0 auto;

    • 注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

• 垂直布局块元素外边距折叠现象

  • 外边距合并现象

    • 垂直布局的块级元素,给上面盒子设置margin-bottom,给下面的盒子设置margin-top,两者的上下外边距会自动合并,最终的距离为两者中的最大值。

    • 解决方案:

      • 可以避免,尽量只给一个盒子添加 margin 值。

  • 外边距塌陷现象

    • 互相嵌套的块级元素,子元素的margin-top会作用在父元素上,导致父元素一起向下移动；如果父元素也有margin-top,此时父元素会塌陷较大的外边距值。

    • 解决方案:

      • 可以为父元素设置border-top或者paddind-top（分隔父子元素的margin-top）。
      • 可以为父元素添加 overflow:hidden,超出部分隐藏。
      • 转为行内块元素
      • 设置浮动

• 清除内外边距

  1*{
  2	padding:0; /* 清除内边距 */ 
  3  margin:0; /* 清除外边距 */ 
  4}
  • 注意：
    • 行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级元素、行内块元素或者设置行高line-height就可以了。