盒模型

快递标签里的收件人文字属于 content；文字和边框之间的呼吸空间是 padding；边界线是 border；整张卡片和邻近内容之间的距离是 margin。

• 开始时：四层空间挤在一起，看不出问题来自哪一层。
• 完成后：从内容向外分开，能分别判断内容区、内边距、边框和外边距。

当问题是文字离边框太近或卡片离邻居太远，先看盒模型中的 padding、border、margin；Flex 布局 解决同级卡片的排列，CSS 负责表达这些规则。盒模型 ≠ Flex，也不是 CSS 的另一个名字。

• 想让标签内容离边框远一点，调整 padding；想让两张标签之间有距离，调整 margin。
• 想改变多张卡片的方向、换行或对齐，处理的是 Flex；想写出边框和间距声明，使用 CSS。

看快递标签的真实界面：标注会落在 content、padding、border、margin 和 box-sizing 规则上。

• 点击编号或说明行可以固定当前部件，悬停离开后恢复已固定的部件。
• 盒边界来自真实 DOM 的嵌套测量，不用图片坐标猜空间位置。

快递标签选择内边距或外边距后，收件人内容与边框或邻居的距离直接变化；这是选择状态的可视化，不需要额外提交按钮。

先判断问题属于元素自身的空间来源，还是同级内容的排列关系。

• 什么时候用：先分别检查内容区、padding、border 和 margin，才能找到空间来源。
• 什么时候不用：同级内容的方向和间距应交给 Flex 或 Grid，不能只堆叠 margin。

怎么判断：先看用户要完成的任务和内容关系，再选择职责准确的组件。

请用盒模型实现快递标签卡片：内容区显示“收件人：阿宁”，使用 border-box 计算卡片宽度；设置 16px padding、1px border 和 12px margin，让文字不贴边、卡片与邻居有间隔；使用真实 DOM 和项目间距变量，在 390px 与 320px 宽度下内容不被挤出，也不出现页面横向滚动。