margin是什么意思：网页布局核心间距

margin是网页CSS样式中的外边距，指元素与其他外部元素之间的空白间距，可四向独立设置数值，默认透明无背景，不占用元素自身尺寸，大多数网页布局间距问题均可通过调整该属性解决，仅不适用于绝对定位脱离文档流的元素场景。

margin的核心基础定义

CSS盒子模型将所有网页元素视作矩形盒子，margin是盒子最外层的间距区域，区别于控制元素内部留白的padding内边距。你设置的margin数值，代表当前元素边框外侧到相邻元素的距离，该区域不会显示元素的背景色、边框内容，仅起到分隔页面模块、调整整体排版疏密的作用，是网页自适应布局的基础属性之一。

margin的四种赋值用法

margin支持单值、双值、三值、四值四种赋值规则，适配不同的间距调整需求，语法简洁且优先级统一。单值赋值时，上下左右四个方向外边距统一为相同数值；双值赋值时，第一个数值对应上下间距，第二个数值对应左右间距；三值赋值依次对应上、左右、下间距；四值赋值严格按照上、右、下、左的顺时针顺序分别设置四个方向间距。

可直接使用常用单位适配不同开发场景，px为固定像素单位，是前端开发最常用的基础单位，适配固定布局页面；%百分比单位以父元素宽度为参照计算间距，适配自适应布局；auto自动赋值可实现块级元素水平居中，是网页居中排版的核心用法。

margin的常见兼容问题

垂直margin塌陷是前端开发中高频出现的经典问题，两个相邻块级元素的上下外边距不会叠加，会自动取两者中的较大值作为最终间距。比如上方元素设置margin-bottom:20px，下方元素设置margin-top:30px，最终两者间距仅为30px，而非叠加后的50px，该问题仅存在于垂直方向，水平margin不会出现塌陷现象。

固定方法简单可直接落地，你可以给父元素添加overflow:hidden属性，或为相邻元素单独包裹容器，即可有效规避垂直margin塌陷问题，适配绝大多数常规网页布局场景。

margin与padding核心区别对比

margin的适用边界限制

脱离标准文档流的元素，margin属性会失效或效果异常，无法正常实现间距控制。固定定位、绝对定位的元素，四向margin均不生效；浮动元素仅垂直margin存在失效概率，水平margin可正常使用，这是W3CCSS2.1标准明确的属性适配规则。

行内元素存在专属使用限制，span、a等行内标签，仅能设置左右margin，上下margin设置后完全无效，不会产生任何间距效果，调整这类元素的垂直间距需改用line-height行高属性。

善用auto值可快速居中。

块级元素设置margin:0auto，无需额外定位代码，即可实现水平居中，适配官网、商城、博客等绝大多数常规网页的内容居中排版需求，是前端轻量化布局的常用技巧。