【学习笔记】CSS深入理解之padding

最新推荐文章于 2025-05-07 11:15:37 发布

转载最新推荐文章于 2025-05-07 11:15:37 发布 · 119 阅读

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017321634

本文深入探讨CSS中padding属性的影响，包括其对不同元素尺寸的作用，如block和inline元素，以及在特定情况下如何处理padding的负值与百分比单位。同时，文章还详细介绍了某些HTML标签的内置padding特性，如ol/ul元素的默认padding-left值，以及在FireFox浏览器下清除button元素padding的方法。

张鑫旭的CSS深入理解之padding学习笔记

padding与容器的尺寸

block元素

padding值过大，一定影响元素尺寸
width为定值，padding会影响元素尺寸
width为auto或者box-sizing为border-box，同时padding值没有暴走，不影响元素尺寸

inline元素：水平padding影响尺寸，垂直padding不影响尺寸，但是会影响占据空间（会显示背景色）

padding负值与百分比单位

padding不支持负值
padding百分比相对于自身宽度计算
inline元素的padding有断行效果
空的inline元素padding高宽不相等，因为inline的垂直padding会让隐匿文本节点出现

标签元素的内置padding

ol/ul

ol/ul元素内置padding-left，单位是px不是em
间距固定，字号过小显得间距过大，字号过大会溢出容器

radio/checkbox

无法设置padding

button

FireFox下清空按钮padding

button::-moz-focus-inner {
    padding: 0; 
}

FireFox下按钮高度计算问题，导致不兼容问题，所以一般使用自定义按钮