内边距（padding）用于控制元素内容与边框间的距离，提升视觉舒适度。它是盒模型的一部分，位于内容外、边框内，增加padding可避免内容紧贴边框。可通过统一设置四边如padding: 20px；或分别设置四边如padding: 10px 15px 20px 25px（上右下左）；也可单独设置某一边，如padding-top: 10px；简写形式中两个值表示上下、左右，三个值表示上、左右、下。实际应用中，如卡片元素设置padding: 16px可使内容居中留白，改用padding: 16px 16px 24px则底部空间更大，布局更美观。合理使用padding能优化页面结构和用户体验。
CSS中的内边距（padding）用于控制元素内容与边框之间的距离。通过设置padding，可以让内容在容器中更有呼吸感，避免紧贴边框，提升视觉效果和用户体验。
理解padding的作用
padding属于CSS盒模型的一部分，它位于内容（content）的外围，紧挨着边框（border）的内侧。增加padding值会扩大内容与边框之间的空白区域，使内容不会显得拥挤。
例如，一个设置了背景色和边框的div，如果不设padding，文字会紧贴边框；加上适当的padding后，文字周围就会留出空间，看起来更舒适。
如何设置padding
padding可以通过多种方式设定，支持单边、双边或四边独立控制：
立即学习“前端免费学习笔记（深入）”；
- 统一设置四边：使用padding: 20px;表示上下左右都为20像素
- 分别设置四个方向：使用padding: 10px 15px 20px 25px;对应上、右、下、左（顺时针顺序）
- 单独设置某一边：如padding-top: 10px;只增加上方内边距
- 简写形式灵活调整：两个值时，第一个为上下，第二个为左右；三个值时，上、左右、下
实际应用示例
假设有一个卡片元素，希望文字不紧贴边框：
div.card {background: #f0f0f0;
border: 1px solid #ccc;
padding: 16px;
}
这样内容距离边框各边都有16px的空间，整体更美观。若想让底部留更多空间，可改为padding: 16px 16px 24px;。
基本上就这些，合理使用padding能有效优化布局结构。
