盒子模型右外边距margin-right

最新推荐文章于 2025-10-02 11:40:32 发布

原创最新推荐文章于 2025-10-02 11:40:32 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html

本文揭示了前端开发中关于子元素margin-right不起作用的现象，通过实例解析了元素位置由7个属性决定的原理，以及'过度约束'的概念，演示了宽度为auto时布局的变化。

在学习前端的过程中发现了一个问题：

在一个父容器中放入一个子容器，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px solid red;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
            
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>
</html>

显示效果是这样的。

在我给这个子容器inner添加margin-right的时候，发现这个属性无论设置多大都不管用。

这时候如果在html中写一点内容

会发现aaa的位置并不会在inner的右边，而是在下面。

一阵学习了之后才发现，元素在其父容器中水平方向的位置是由7个元素决定的，分别是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。

元素在其父元素中，水平布局必须要满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right == 其父元素内容区的宽度。这个等式在浏览器中是必须满足的，如果相加的结果不满足等式，浏览器会自动调整。

在这个例子中，等式为：0+0+0+200+0+0+0 == 800 ，不满足等式，所以浏览器将inner的margin-right设置为了600px，使其满足等式。导致内容aaa的位置在父容器下方。这种现象叫做“过度约束”。

上述现象只在其7个值都不存在auto的情况下，浏览器会自动调整margin-right，如果当有值为auto时，浏览器会自动调整auto的值，使其满足等式，如，将inner的宽度调整为auto：