为什么padding-left有效，padding-right无效？

Question

左右都有padding 为什么右侧padding没有占据空间？

html

<div class="layout-cup-r clearfix">
    <div class="l-main">main</div>
    <div class="l-right">right</div>
 </div>

css

.layout-cup-r {
    width:100%;
    padding-right: 210px;
    .l-main {
      width: 100%;
      float: left;
      height: 200px;
      background-color: #eee;
    }
    .l-right {
      width: 210px;
      height: 200px;
      background-color: #d2d2d2;
      float: right;
      margin-right: -210px;
    }
  }

解决

1.父元素宽度不设或设为80%或更小，发现其实未显示的部分是在视口之外。
2.另一种是将父元素设为border-box

但是产生这种现象的原因还未知。

Answer 1

截图显示有,肯定是其他样式互相冲突了,视觉上看不出来.
需要看代码,代码......

实际上你的问题可以简化一下

描述

正常情况下

• 子元素浮动以后
• 是要紧挨着父元素的包含框
• 这里的子元素的右边为什么挨着父元素的边框了呢

代码

<div style="width:100%;padding:0 200px;">
    <div style="width:100%;background-color:red;height: 200px;float: left;"></div>
</div>

解决

1. 取消父元素的width:100%属性.
2. 给父元素添加box-sizing:border-box;
3. 让父元素变成一个模型框

原因

在firfox下面没有这个异常,只是在chorme下面有这个问题
这个可能和浏览器的渲染原理有关吧,标准盒模型和IE盒模型下,再加上width:100%这个东西的影响..具体为什么我也搞不懂.求解释

Answer 2

页面的默认文本方向是从左到右，所以一般布局上不能同时满足left和right时，left的优先级会比right高
你提供的信息有限（不知道父元素和子元素的布局），所以就不清楚是否达到了上面说的情况
你可以试下下面的设置，将文本方向换一下，看看是不是right优先级变高了

document.documentElement.dir = 'rtl'

Answer 3

其实右侧也是也是有padding的，你的layout-cup-r盒子设置了padding-right后，l-right也设置了margin-right，l-right盒子向右边移动的单位正好是你的padding-right,所以视觉上并没有看出来。你去掉margin-right就看的到了
哦对。。还有就是你的l-main盒子是100%，他会使得盒子占据父盒子的所有宽度，如果不加margin-right, l-right盒子会掉下去。你需要设置成一个更小一点让两个盒子的宽度加起来小于父盒子。