iframeの下に余分なスペースが作成されます

Question

なぜiframeは要素の下に余分なスペースを追加しますか？この奇妙な振る舞いを見てください：

.border { 
 
    background: red; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid green; 
 
    overflow: visible; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.border iframe { 
 
    border: none; 
 
    width: 300px; 
 
    height: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    opacity: 0.8; 
 
} 
 

 
.border .lower { 
 
    height: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: blue; 
 
    opacity: 0.8; 
 
}

<div class="border"> 
 
    <iframe src="https://example.com"></iframe> 
 
    <div class="lower"></div> 
 
</div>

回避する方法？

Answer 1

そうのようなあなたのiFrameスタイルにdisplay:block;を追加します。

.border iframe { 
    border: none; 
    width: 300px; 
    height: 100px; 
    margin: 0; 
    padding: 0; 
    opacity: 0.8; 
    display:block; /* Add this */ 
} 

のiFrameは、imgタグのように、空白の問題を持つことができ、インライン要素であることを意味し、インラインフレームです。 display:block;を設定すると、iFrameが（divのような）ブロック要素に変わり、空白の問題が取り除かれます。

Answer 2

iframeはインライン要素です。これはあなたのHTMLの空白を考慮に入れます。 display:inline-blockは難しいと評されています。

iframeのCSSにdisplay:block;を追加します。ここ

Answer 3

は別の答え、それを確認してくださいです...

.border iframe { 
border: none; 
width: 300px; 
height: 100%; 
margin: 0; 
padding: 0; 
opacity: 0.8; 
} 

Answer 4

iframe要素は、インライン要素です。スペーシングの問題を修正する方法の1つはdisplay: blockを追加することですが、vertical-align: bottom;を単にiframe要素に追加することで修正することもできます。

Answer 5

私のアプリでは、iframeのhtmlにoverflow-y: hidden;が追加されました。

Answer 6

これを行う最も簡単な方法は、iframe paramsに "style =" display：block "を追加することです。例えば

<iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>