在 Qt 样式表里，margin 和 padding 的区别和 CSS 的盒模型基本一致，可以直接记成这张图：
margin -> border -> padding -> content
也就是：
- margin：控件边框外面的留白
- padding：控件边框里面、内容外面的留白
直观理解
假设一个 QPushButton 显示文字"确定"：
- padding 变大：按钮里面更"空"，文字会离边框更远，按钮看起来更厚
- margin 变大：按钮外面和周围元素的距离更大，像是给按钮外圈留空
最简单的例子
QPushButton {
border: 2px solid #444;
padding: 10px 20px;
margin: 8px;
background: #dcdcdc;
}这里的效果是：
- border：画出按钮边框
- padding: 10px 20px：文字和边框之间上下留 10，左右留 20
- margin: 8px：按钮外面再留 8 像素空间
核心区别
-
padding 影响内容区域
按钮文字、图标、文本绘制区域会往里缩。
-
margin 影响外部区域
是控件外圈的空白，不属于内容区域。
-
background 通常画在 border 内部，不会画到 margin 区域
也就是说 margin 区域通常是"外部空白"，不是控件背景的一部分。
一个更具体的视觉例子
假设按钮总外框是 200x60：
padding: 10px
按钮里的文字显示区域会缩小，文字离边框更远。margin: 10px
按钮本身外侧和相邻控件之间多出 10px 空白。
常见误区
最容易混淆的是：Qt 里还有布局的 margin，这和 QSS 的 margin 不是一回事。
-
QSS 的 margin
是样式表盒模型的一部分，作用在控件绘制盒上。
-
QLayout 的 contentsMargins / spacing
是布局系统控制子控件间距和布局边距的方式。
实际开发里如果你想控制：
- 控件和控件之间的距离：优先用布局的 spacing
- 整个布局离窗口边缘的距离：优先用 layout->setContentsMargins(...)
- 控件内部文字离边框的距离：用 padding
也就是说，做界面排版时，通常更常用的是：
- layout spacing
- layout contentsMargins
- 样式表里的 padding
而不是大量依赖 QSS 的 margin。
Qt 里的一个实用判断
如果你的目标是：
-
"让按钮里面的文字别贴边"
用 padding
-
"让两个按钮别挨太近"
优先用布局 spacing，次选 margin
-
"让整个面板内容离边缘远一点"
用 layout 的 contentsMargins，不是控件样式表的 padding/margin
示例对比
cpp
button->setStyleSheet(
"QPushButton {"
" border: 1px solid gray;"
" padding: 12px 24px;"
"}"
);效果：
- 按钮内部更宽松
- 文本离边框更远
cpp
button->setStyleSheet(
"QPushButton {"
" border: 1px solid gray;"
" margin: 12px;"
"}"
);效果：
- 更偏向按钮外部留白
- 但如果这个按钮在布局里，实际间距控制常常还是应该交给布局系统
一句话总结
- padding：控件里面的空白，影响内容位置
- margin：控件外面的空白，影响外部间距
- Qt 做界面布局时，外部间距更推荐用 QLayout 的 spacing 和 contentsMargins
先看两张图，分清"样式表盒模型"和"QWidget 几何系统"，后面就不容易混了。
盒模型图
在支持 QSS 盒模型的控件或子控件里，可以把它理解成这样：
外侧
↓
margin
↓
border
↓
padding
↓
content
↑
内侧
展开成矩形层级就是：
marginRect
borderRect
paddingRect
contentRect
含义分别是：
- marginRect：最外层留白区
- borderRect：边框所在区域
- paddingRect：边框内、内容外的缓冲区
- contentRect：真正放文本、图标、子内容的区域
Qt 里还要再叠一层几何概念
QWidget 本身还有一套和样式表不同的几何概念：
widget rect
contentsRect
这里的 contentsRect 是由 QWidget::contentsMargins 决定的，不是由 QSS 的 padding 决定的。
这正是最容易混的点。
四个概念分别是什么
- margin
- 是边框外的留白。
- 作用是把控件和外界"隔开"。
- 它不属于内容区，也通常不是背景绘制区。
- 在 Qt 里它属于样式表盒模型的一部分，但对控件间排版，通常不如布局的 spacing 稳定、直接。
- padding
- 是边框内的留白。
- 它会把文本、图标、内容往里推。
- 你想让按钮文字别贴边，通常调的是 padding。
- 它属于控件内部视觉布局，不是 QWidget 的几何边距。
- border
- 是围住内容区和 padding 区的一圈边框。
- 宽度、颜色、圆角、线型都属于 border 范畴。
- border 会参与视觉尺寸，但它和布局系统不是一回事。
- background
- 背景通常画在 border 以内，不包含 margin 区域。
- 直观上可以理解为：margin 是外部空白，background 不会涂到那里。
- 如果不讨论更细的 background-origin 和 background-clip，工程上这样理解就够用了。
最关键的区别：contentRect 和 contentsRect 不是一回事
- contentRect
- 这是盒模型语义里的"内容区"。
- 它是去掉 margin、border、padding 之后剩下的最内层区域。
- 文本、图标、富文本通常是在这个语义区域内排布。
- contentsRect
- 这是 QWidget 的 API 概念。
- 它来自 QWidget::contentsMargins。
- 公式可以理解为：
contentsRect = rect 去掉 contentsMargins 后的区域 - 它通常不受 QSS 的 padding、border、margin 直接影响。
这句话最重要：
你给控件写了 QSS padding: 10px，不代表 QWidget::contentsRect 会自动缩进 10 像素。
一张对照图
把两套系统叠起来看，关系是这样的：
QWidget 几何系统：
rect
由 QWidget 实际大小决定
contentsRect
由 QWidget::contentsMargins 决定
QSS 视觉盒模型：
marginRect
borderRect
paddingRect
contentRect
所以：
- rect / contentsRect 是 QWidget 几何和布局层的概念
- margin / border / padding / contentRect 是样式引擎绘制层的概念
两套概念会配合工作，但不是同一个东西。
你在界面里看到的实际效果
假设一个按钮上有文字"确定"。
如果调大 padding：
- 按钮里面更空
- 文字离边框更远
- 按钮视觉上更"厚"
如果调大 margin：
- 按钮外面留白更大
- 更像和周围控件拉开距离
如果调大 border：
- 边框更粗
- 内容区域会相对更小
如果调用 setContentsMargins：
- 这是 QWidget 的内部可用区域变小
- 如果这个控件里还有布局或子控件，子控件会被整体往里收
- 这不是单纯视觉效果，而是几何可用空间真的变了
最常见误解
- 误以为 QSS 的 padding 会改变 QWidget::contentsRect
- 通常不会。
- padding 主要影响样式引擎如何摆放文本和绘制内容。
- 误以为 QSS 的 margin 等于布局间距
- 不完全等价。
- 真正控制控件之间距离，优先用布局的 spacing。
- 真正控制布局离容器边缘距离，优先用 layout 的 contentsMargins。
- 误以为 background 会画到 margin 上
- 一般不会。
- margin 更像外部空白区。
- 误以为 border 和 contentsMargins 是同类东西
- 不是。
- border 是画出来的。
- contentsMargins 是几何上留出来的。
工程里该怎么选
- 想让文字别贴按钮边框：用 padding
- 想让边框更粗或有圆角：用 border
- 想让整个控件和旁边控件拉开：优先用布局 spacing
- 想让一个复合控件内部子控件整体往里收：用 setContentsMargins
- 想让控件背景填充内部：用 background
一句话记忆
- margin：外面的空
- padding：里面的空
- border：边上的线
- background：里面那层底色
- contentRect：样式盒模型里的内容区
- contentsRect：QWidget 真实可用内容区，由 contentsMargins 决定