padding

padding不支持任何负值，padding百分比是相对于宽度计算的。

inline元素padding百分比值：

1.同样相对宽度计算

2.默认的高度宽度细节有差异

3.padding会断行

inline元素的垂直padding会让空白节点显现，也就是规范中的strut

padding的百分比是相对于宽度来计算的

padding的百分比是相对于宽度来计算的

padding不支持负值

内联元素 padding

利用padding实现正方形

利用padding实现正方形

padding不支持任何负值，padding百分比是相对于宽度计算的。

inline元素padding：

1.同样相对宽度计算

2.默认的高度宽度细节有差异

3.padding会断行

inline元素的垂直padding会让空白节点显现，也就是规范中的strut

padding 50%的时候

font-size 0

才为正方形

+++++++++++++

inline的padding

正方形+++

++++++++++++

++++++++++++

• padding不支持任何负值

• padding百分比同margin一样，用宽度计算

• inline水平元素的padding百分比值
  

1. 默认的高度宽度细节有差异

2. 同样相对于宽度计算

3. padding会断行
   

            inline元素的padding断行 

            空inline元素+padding高宽也不等

1、padding不支持任何形式的负值 

2、padding百分比相对于宽度计算

3、inline水平元素的padding百分比值

    （1）同样相对于宽度计算

    （2）默认的高度宽度细节有差异（空inline元素+padding高宽不等）

    （3）padding会断行

div{padding: 50%} --> 正方形

padding使用案例：

.div{
    padding:50%;
}

可以制作正方形。

但是对于inline元素，垂直padding会让“struct（幽灵空白节点）”出现，所以改成

.inline_div{
    padding:50%;
    font-size:0;
}