My iframe a style of style="width:100%"
, and it almost covers the page width. But it leaves a small margin on the left and right side. So I added body { margin:0px; }
to remove the space.
It works, but the problem is that removing the margin on <body>
affects other things, for example a paragraph <p>
inside <body>
.
Is there a way to eliminate the margin only for the <iframe>
?
Code:
<!DOCTYPE html>
<html>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
You should do some like:
body{margin:0} // remove body margin
iframe{margin:0;width:100%}//remove iframe margin
p,div{margin:10px} //append margin to p and other tags
Demo for your case:
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
iframe{margin:0;width:100%}
p{margin:10px}
</style>
</head>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With