margin-left: auto;为什么可以使元素靠右

最新推荐文章于 2025-02-12 02:00:00 发布

gooodi

最新推荐文章于 2025-02-12 02:00:00 发布

阅读量1.3w

点赞数 8

分类专栏：记录

记录专栏收录该内容

24 篇文章

订阅专栏

本文深入解析了CSS中使用'margin-left:auto;'使div元素靠近浏览器右侧的原理，以及如何通过'margin:auto;'实现元素的水平居中。这涉及到CSS盒模型中各属性之间的计算规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div {
  width: 100px;
  margin-left: auto;
}

上面的代码可以使得div靠近浏览器的右侧显示是为什么？

有点弱智的问题,竟然现在才知道...记录一下

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' +'border-right-width' + 'margin-right' = width of containing block

你的属于其中一种情况：
If there is exactly one value specified as 'auto', its used value follows from the equality.

也就是在上述等式中，只有你设置的margin-left: auto，那么margin-left将会被设置为满足上述等式，而等式的右边是容器盒子宽度，等式中的其它值(除过width)都为0，因此margin-left = width of containing block - width(div)

再来看一下我们经常使用的 margin: auto 水平居中的原理。

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

转自知否 https://segmentfault.com/q/1010000008431088