内边距
Padding
中级通用内边距（Padding）是 CSS 中元素内容与边框之间的空间。它让卡片里的文字、按钮上的标签不紧贴边缘；你可以分别设置上、右、下、左四个方向的距离。
你可能会说：「卡片里的文字离边框太近了，帮我把四周撑开一点，但别拉大卡片之间的距离。」
动手看看物流通知卡片
物流通知
包裹已发出，预计明天送达
查看物流
外边距边框内边距内容
拖动四侧滑块，看看内容到虚线边框的距离怎么变。内边距在边框里面，不是卡片与其他元素之间的距离。
这里固定了 260px 的内容宽度，并使用 content-box；增大左右内边距，卡片测得的总宽度也会增加。
要点内边距把哪一段距离撑开？
- 1
它隔开内容和元素边缘
你给卡片加内边距，文字会离卡片边框更远；卡片之间的距离却不会因此直接改变。可以把它理解为卡片给自身内容留出的空间。
- 2
四个方向可以分别控制
做后台侧栏时，你可能想让菜单项左右留得宽一些，上下留得窄一些。这时可以分别设置内边距的四个方向，而不必让它们都相同。
- 3
留白也会影响元素尺寸
内边距占空间，所以加大它可能让按钮变宽、卡片变高。如果元素已有固定宽度，最终尺寸还与 box-sizing 的设置有关；改完后可以检查是否挤压了旁边的内容。
容易混淆的地方
内边距管元素内部：内容离自身边框有多远。外边距管元素外部：这个元素离相邻元素有多远。比如两张卡片贴得太近，调卡片的外边距或父容器的间距；卡片里的文字贴着边框，才调卡片的内边距。
什么时候用
适合用
- 做数据看板的统计卡片时，给标题和数字留出距卡片边缘的空间，让内容不贴边。
- 做 App 按钮时，让文字与按钮边缘保持距离，使按钮的外形有足够空间容纳标签。
- 做表单输入框时，让用户输入的文字与输入框边线隔开，读起来更清楚。
不适合用
- 想拉开两张卡片之间的距离时，用父容器的 gap 或卡片的外边距；内边距只改变各卡片内部。
- 想增加一段文字的行与行之间的距离时，调整行高；内边距隔开的是整块内容与元素边缘。
练一练选一个答案，看看解释
你做了一个带边框的消息卡片，文字紧贴边框，但卡片之间的距离已经合适。你会怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请调整消息列表里的卡片：给卡片设置四周内边距，让正文和边框之间留出空间；保持卡片之间现有的间距不变。修改后检查窄屏下文字是否被挤压或溢出。