Padding 和 Margin 是 CSS 最常见的几个属性之一，它们起到了控制元素之间内外间距的作用。虽然看起来没什么可讲，但深究起来还是有很多需要我们注意的细节。下面就让我们进入 Padding 和 Margin 的世界。

padding的百分比值

与height等属性的百分比计算规则不一样, padding百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。

div {
  padding: 50%; /* 正方形 */
}
div {
  padding: 25% 50%; /* 宽髙比2:1的矩形 */
}

内联元素与padding

内联元素垂直padding的层叠现象

a {
  padding-top: 50px;
  padding-bottom: 50px; /* 真的是纯视觉层叠吗? */
  background: yellow;
}

a{这是一个padding}*50

应用

增加链接点击区域的大小

CSS中几种层叠现象总结

纯视觉层叠(不影响外部尺寸)

box-shadow 盒装阴影
outline 轮廓

视觉层叠(影响外部尺寸)

inline元素的垂直padding

判断依据: 层叠区域超出父容器后会不会出现滚动条

内联元素padding的换行现象

.box {
  border: 2px dashed #cd0000;
}
span {
  padding: 50%;
  background: gray;
}

幽灵空白结点(strut)与内联元素的padding

span {
  padding: 50%;
  background: red;
  /* font-size: 0; */
}

实战: 利用padding绘制图形

绘制"三道杠"

.icon-menu {
    display: inline-block;
    width: 140px; height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: currentColor;
    background-clip: content-box;
}

绘制双层圆点

.icon-dot {
    display: inline-block;
    width: 100px; height: 100px;
    padding: 10px;
    border: 10px solid;    
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
}

margin的百分比值与负值

百分比值

和padding一样, margin的百分比总是相对于父级元素的宽度计算的 ## 负值 margin支持负值

元素尺寸的相关概念

元素内部尺寸, 又叫元素可视尺寸, 即padding-box的尺寸, 对应于DOM API中的clientWidth和clientHeight
元素尺寸, 又叫元素偏移尺寸, 即border-box的尺寸, 对应于DOM API中的offsetWidth和offsetHeight
元素外部尺寸, 即margin-box的尺寸

margin与元素的内部尺寸的关系

当元素定宽或者为表现为包裹性时, margin对元素的内部尺寸无影响
当元素表现为流动性时, margin对元素的内部尺寸有影响总结: 当且仅当元素在某一方向表现为流动性时, margin对元素的内部尺寸才有影响. > 元素在垂直方向上的流动性会在绝对定位中讲到..先别慌

margin与元素的外部尺寸的关系

只要元素具有块状特性, 无论有没有设置宽髙、无论水平方向还是垂直方向, 即使发生了margin合并, margin对外部尺寸总是会有影响.

margin无效的几种情形

inline非替换元素的垂直margin无效 > 注意是内联非替换元素, 对于内联替换元素来说, 不仅垂直margin有效, 而且不会发生margin合并现象.
表格中的<tr>和<td>元素或者display计算值为table-cell和table-row的margin无效
定高容器子元素的margin-bottom或者宽度定死的子元素的margin-right无效 > 若想使用margin改变自身的位置, 必须是和当前元素定位方向一样的margin属性才可以, 否则, margin只能影响后面的元素或者父元素。
*发生了margin合并(如父子margin重叠)
*绝对定位元素非定位方位的margin值无效
*鞭长莫及导致的margin无效(FLAG: flow+overflow)
*内联特性导致的margin无效(FLAG: 5.3)

Shiqi's Blog

Padding和Margin