对于inline元素
- padding影响水平尺寸 不影响垂直 但是影响背景色
- inline水平元素的padding百分比值
- 同样相对于宽度计算
- 默认的高度宽度细节有差异
- padding会断行
- inline就算是空白元素,padding高和宽也不想等
- 是因为:inline元素的垂直padding会让“幽灵空白节点”显现,也就是规范中的”strut”出现。
对于block元素
- 即使是设了box-sizing:border-box;
当padding增大到一定程度时,就会改变容器的宽高
- width:auto 或box-sizing:border-box时,元素尺寸不会改变,内容(骨架)收缩
padding的百分比是按照宽度进行计算的,padding不支持任何形式的负值
1.制作正方形的横幅,可以利用百分比padding为50%,
其他padding相关
padding·绘制图形
- 三道杠
- 白眼
padding 布局
- 使用百分比单位构建固定比例布局结构(正方形)
- 配合margin等高布局
- 两栏自适应效果