iframe body remove space

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>

Solution

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>