在css中padding-left padding-right区别_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-11-03

浏览次数：次

padding-left 设置内容与左边框的间距，使内容右移；padding-right 增加右侧空白，不影响左侧位置；两者独立控制盒模型中左右内边距，常用于布局留白。

在css中padding-left padding-right区别

在CSS中，padding-left 和 padding-right 都是用来设置元素内部填充的属性，但它们作用的方向不同，影响的是元素内容与左右边框之间的空白区域。

这个属性用来设置元素左边的内边距。也就是内容距离元素左边界的空间大小。

• 增大 padding-left 会让内容向右移动
• 它不会影响其他方向的间距
• 常用于文本左对齐时增加左侧留白，比如段落缩进或图标与文字间隔

这个属性控制元素右边的内边距。即内容距离元素右边界的空间。

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

• 增加 padding-right 会让内容左侧位置不变，右侧留出更多空白
• 在右对齐文本或需要右侧呼吸空间时很有用
• 比如按钮文字不紧贴右边框，看起来更舒适

假设有一个宽度固定的 div：

div {
width: 200px;
background: #eee;
}

如果设置 padding-left: 20px;，文字会从左边空出20px开始显示。
如果设置 padding-right: 20px;，文字依然从左边开始，但在右边多出20px的空白，直到边框结束。

两者可以同时使用，也可以单独设定，互不影响。它们都属于盒模型中的“内边距”部分，会影响元素内容区的实际可用宽度（除非使用 box-sizing: border-box）。

基本上就这些，区别就在于方向：一个管左边空隙，一个管右边空隙。

以上就是在css中padding-left padding-right区别的详细内容，更多请关注其它相关文章！