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>

回答1:

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>

回答2:

As you can see, you can use body{margin:0 0 0 0px;} for top, right, bottom, left. You will be able to remove all spaces from browser.

<!DOCTYPE html>
<html>
<style type="text/css">
body {
    margin:0 0 0 0px;
}
</style>
<body>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>

回答3:

what's wrong with:

iframe {
  margin: 0;
}

in your iframe containg page

来源：https://stackoverflow.com/questions/13146177/iframe-body-remove-space

标签

html

iframe

styles

width

margin