填充不适用于填充权限

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";
  });
}

如果你打电话

，请在Stackoverflow上尝试等

Room333(33,'asd');

你会在左下方得到一个小横幅，当点击时你会看到popover但是看右边的填充，

为什么一切都很好，左边，顶部，按钮填充，哪里是30px，右边填充是0px？

我如何解决这个问题？

在这里看右边距填充：

Answer 1

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

添加

box-sizing: border-box;

这将填充里面的填充 100％宽度。