web-dev-qa-db-ja.com

iframeを囲む余分な空白を削除しますか？

私は自分のページでiframeを使用していますが、奇妙な問題に出くわしました。 iframe cssを次のように設定します

iframe {
    margin: none;
    padding: none;
    background: blue; /* this is just to make the frames easier to see */
    border: none;
}

ただし、iframeを囲む空白がまだあります。 ChromeとFirefoxでテストしましたが、同じです。周りを検索したところ、何も見つかりませんでした。この空白は、Chrome console。また、次のCSSも既に持っています。

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}

JSFiddle： ここ

htmlcssiframewhitespaceremoving-whitespace
46
Colin Atkinson

あなたのフィドルを見たのは、display:inline-blockを使用しているためです。これにより、HTMLの空白が考慮されます。 display:inline-blockは難しいことで有名で、危険なブラウザをサポートしています。

オプション1：htmlの空白を削除してみて、問題をソートできる場合があります。

オプション2：display:blockなどの異なる表示プロパティを使用すると、間違いなく問題がソートされます。ライブの例： http://jsfiddle.net/mM6AB/3/

66
tw16

インライン要素を使用している場合、空白は要素が含まれる「行」（つまり、ベースラインの下のスペース）からのものである可能性があります。解決策は、これを親要素に追加することです。

line-height: 0;
15
Jeff Clemens
iframe { display:block; }

iframeはインライン要素です

9
Sergio Rodrigues

私は同じ問題を抱えていたので、フレーム要素をフローティングにして修正しました

iframe {

    margin: none;
    padding: none;
    border: none;
    line-height: 0;
    float: left; 
}
2
user6046313

たぶん、その空白は実際にはにロードされたドキュメントの外側のマージンです。ロードされたドキュメントのスタイリングを試してください（CSSスタイリング（ソースページ））：

html, body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

stackoverflow.comから引用 ここ

2
Tooma

overflow: hidden;を囲む<iframe>でdivを使用してみてください。

<div style="height: 29px; overflow: hidden;">
   <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30">
      <p>Your browser does not support iframes.</p>
   </iframe>
</div>
1
dipankar

あなたのHTMLコンテンツなしでは解決するのは少し難しいですが、これを試してみてください：

iframe {
    margin: 0px !important;
    padding: 0px !important;
    background: blue; /* this is just to make the frames easier to see */
    border: 0px !important;
}

html, body {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100%;
    height: 100%;
}

!importantを追加すると、スタイルが強制されます。私の推測では、スタイルは相互に上書きしているのです。

1
Marc Uberstein

与えられた答えのどれも私に解決策を提供しなかったので（iFrameを実装するときに奇妙なマージンの問題に出くわしました）、私はこれがうまく機能していることがわかりました：

<iframe frameborder="0" marginwidth="0" marginheight="0" src="/something"></iframe>

marginwidthおよびmarginheightは有効ではない/公式にサポートされているHTML5タグですが、テストでは問題なく動作します...

0
Leander