Search code examples
htmlcssiframemargin

Padding dont work for padding-right

I have this code that I put on webpages:

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

and try etc. on Stackoverflow if you call 

Room333(33,'asd');

you will get small banner at left bottom side and when click then you will see popover but look at right padding,

Why is everything fine with left, top, botton padding where is 30px but right padding is 0px?

How I can solve this?

Look here right margin-padding: enter image description here

Solution

  • You are combining 100% width and 100% height with padding. In this case by default the overall width exceeds the 100% by the amount of the padding, which is probably what happens in your case.

    Add

    box-sizing: border-box;

    This will calculate the padding inside the 100% width.