CSS中的margin到底是个啥？一文搞懂！

陆砚码

2026-06-29 • 👁 2人浏览过

导语

大家好，我是陈景序，今天我们来聊聊CSS中那个让人头疼的margin。相信很多人在使用margin的时候都会遇到一些奇怪的问题，比如为什么两个相邻的元素会有一个巨大的间距？为什么设置了margin: auto;却还是不居中？别急，今天我们就来详细解析一下margin的细节，让你对它有一个更深入的理解。

CSS中的margin那些事儿

1. display为inline的元素的padding和margin垂直方向都不会影响布局，但会改变其盒子的内外尺寸。

const span = document.querySelector('.float-span');
console.log('值：', window.getComputedStyle(span).display);//值为block

2. margin合并只出现在上下相邻或父子相邻的块级元素之间，浮动和绝对定位不能使margin合并。

3. 元素的margin和padding的百分比值都是相对元素的宽度计算，但由于margin合并的存在，不会存在很大的意义。

margin合并的条件和场景

块级元素之间
发生在与流方向相垂直的方向
相邻兄弟块级元素合并
父子元素的合并
空块级元素之间自己margin的合并

margin的默认值和auto的妙用

5. margin的默认值是0，为auto时则为其分配剩余可用空间。

利用margin实现垂直水平居中

.father {
      width: 500px;
      height: 400px;
      margin: 0 auto;
      background-color: blue;
      position: relative;
      
}
.son {
    width: 200px;
    height: 100px;
    background-color:red;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

margin无效的情况

display的计算值为table-cell或table-row
发生margin合并之后
绝对定位元素未定位方位的margin
左侧有一个float：left的块
图片随着margin的负值上移，到达某个负值后不再上移

小结与拓展

好了，今天我们就聊到这里。通过这篇文章，相信大家对margin有了更深入的了解。如果你还有其他关于CSS的问题，欢迎在评论区留言讨论。我是陈景序，感谢大家的阅读，我们下期再见！

想要了解更多关于Web开发的知识，请关注「websoft网络软件专家」（www.phpwebsoft.com）。

导语