填充不适用于 padding-right

Question

我把这段代码放在网页上：

function Room333(dis,www){
  var content = '<a id="showRtb" href="#"><div style="position: fixed;text-align:center;left: 0px;width: 250px;height: 100px;bottom: 0px;z-index: 9999999;/* background: #fff; */background-image: url(&quot;http://i.imgur.com/Q5R0btP.png&quot;) !important;">   </div></a><div id="rtb" style="width:100%; height:100%; position:fixed; padding:30px; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="http://www.blic.rs" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px;  z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';

  var newNode = document.createElement("DIV");  
  newNode.innerHTML = content;
  document.body.appendChild(newNode); 

  document.getElementById('showRtb').addEventListener('click', function () {
    document.getElementById('rtb').style.display="inline-table";
  });
  document.getElementById('hideRtb').addEventListener('click', function () {
    document.getElementById('rtb').style.display="none";
  });
}

如果您调用

并在 Whosebug 上尝试等

Room333(33,'asd');

你会在左下角看到一个小横幅，当点击时你会看到弹出窗口，但会看到右边的内边距，

为什么左、上、下内边距 30px 但右内边距为 0px 一切正常？

我该如何解决这个问题？

看这里右边距填充：

Answer 1

您正在将 100% 宽度和 100% 高度与填充结合起来。在这种情况下，默认情况下总宽度超过 100% 的填充量，这可能是您的情况。

添加

box-sizing: border-box;

这将计算 100% 宽度内的填充。

填充不适用于 padding-right

Padding dont work for padding-right

html

css

iframe

margin