CSS盒模型入门：margin、padding与border布局避坑

很多新手写CSS，明明设了宽度200像素，元素却比200像素宽，怎么调都对不齐。问题几乎都出在CSS盒模型没搞懂。今天老陈用最直白的话，把盒模型讲透，让你以后写布局不再瞎猜，这是网站开发里最该先啃下的基础概念。

一、什么是CSS盒模型

网页里每个元素都是一个个盒子。一个盒子从里到外分四层：内容是文字图片本身；padding是内边距，内容和边框之间的空隙；border是边框；margin是外边距，盒子和其他盒子之间的空隙。你看到的“元素大小”，其实是这四层加起来的总尺寸，搞清这点是布局不翻车的前提。

二、最容易踩的坑：宽度算错

默认情况下，你写的width只算内容区，不包含padding和border。比如下面这段代码：

.box { width: 200px; padding: 20px; border: 5px solid red; }

你以为盒子宽200像素，实际是200加左右padding共40，再加左右border共10，等于250像素。新手排不好版，八成是栽在这里，这点特别要注意。

三、box-sizing救你一命

不想每次心算，加一行就能让width变成“总宽度”：

*, *::before, *::after { box-sizing: border-box; }

设成border-box后，width就包含padding和border，写200就是200，布局立刻好控。老陈建议每个新项目开头先加这句，能省掉无数对齐烦恼，是新手避坑第一招。

四、margin合并与塌陷

• 上下margin会合并：两个上下相邻的块，间距取较大的那个，不是相加
• 父元素margin-top塌陷：子元素顶部margin会“漏”到父元素外，常用加border或padding解决
• 负margin能用，但要慎用，容易把布局搞乱

五、padding和margin怎么选

简单记：padding是盒子内部的呼吸感，影响背景色范围；margin是盒子外部和其他元素的间距，不影响背景。按钮想让文字离边有点空隙用padding，想让按钮之间隔开用margin，别混着用。

老陈总结

CSS盒模型是网页布局的地基，搞懂内容、padding、border、margin四层关系，再加一句box-sizing: border-box，你就能解决大半排版问题。老陈建议你现在就打开浏览器按F12，随便选个网页元素，在审查面板里看它的盒模型图示，对照本文一层层认一遍。亲手看一遍，比背十遍都牢。想系统学网站开发，可以看我相关课程，或者评论区留言发链接给你。