CODEWITHSUNDEEP
htmlcssiframe
roNn23
roNn23

Reputation: 1662

iframe with 0 height creates a gap

When I add an iframe to directly after the body, it causes a top margin. Can somebody explain this please? The iframe has no height and no margin.

*, html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
iframe {
  margin: 0;
}
body {
  background: gray;
}
<iframe width="0" height="0" frameborder="0" scrolling="no" vspace="0" hspace="0" marginheight="0" marginwidth="0" src=""></iframe>
<div style="background: red;">TEST</div>

See the fiddle: http://jsfiddle.net/pLja65pc/1/

Upvotes: 5

Views: 5205

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272116

Iframe is an inline element so it will create a line box. The height of the line box will be equal to the line height (~18px for 16px font) or taller (if iframe is taller than font size).

Change the iframe to display: block and will create a block box with the desired height.

Upvotes: 10

Alien
Alien

Reputation: 3678

add display: block; to iframe

*, html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
iframe {
    margin: 0; 
    display: block;
}
body {
    background: gray;
}
<iframe width="0" height="0" frameborder="0" scrolling="no" vspace="0" hspace="0" marginheight="0" marginwidth="0" src=""></iframe>
<div style="background: red;">TEST</div>

Upvotes: 2

Shaban Khan
Shaban Khan

Reputation: 156

please use display block for iframe css Thanks

Upvotes: 0

Related Questions