margin-right无效问题简析

我们都知道盒子模型的组成，外边距，内边距，内容区，和边框，在css样式中一般通过margin-left和margin-top控制盒子的向右和向下移动，可是每当在css样式中添加margin-right样式往往不会生效，这又是为什么呢？今天我们来详细说说这个问题。

在了解这个问题之前，我们先要了解一下css中的过渡约束问题，所谓过渡约束问题，是浏览器所限定的，元素在其父元素中水平方向的位置由以下几个属性共同决定：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right= 父元素内容区宽度

如图所示：

 如果不满足这个公式的话，浏览会自动的调整相应的宽度来匹配它，其中优先调整的是没有定义到的值，例如下列代码：

<style>
        .out-box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .inner-box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid;
            margin-left:20px;
            padding: 20px;
            
        }
</style>

   <div class="out-box">
        <div class="inner-box">

        </div>
   </div>

图片：

 

此时我们没有设置margin-right，所以盒子的右外边距便会被浏览器自动计算，值就是300-40-2-100 -20 = 138px ，这也是为什么我们在css中设置样式时盒子会相应移动的原因，浏览器会自动调整相应的宽度，可是浏览器中给 margin-right默认设置了auto属性，因此子盒子的设置都是从左上开始的，这也是我们对css中的margin-right设置宽度无效的原因。