I'm building a web app and unfortunately I have a white border around the top and left of the page. I have set the html and body padding and margin to 0px but it doesn't seem to be having any effect on it. Inside of the body is a single iframe and when I preview the site and I go on inspect element it shows that the padding is on the body...
Here is the code - if anyone could take a look that would be great!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>index</title>
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin: 0px !important;
padding: 0px !important;
height:100%;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=320" />
<!-- end copy -->
</head>
<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4823"></script>
</div>
<!-- end copy -->
</body>
</html>
Try setting the margins of the #my-iframe to a negative number, e.g. -10px:
#my-iframe {
width: 100vw;
height: 100vh;
border: 0;
padding: 0;
margin: -10px;
}
This may cut a small section of the iframed site off, but judging by the look of the site a few pixels off the edge won't do much damage.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments