HTML: Strange space between iframe elements?
Question:
Consider the following HTML:
-
Specify the seamless attribute, which is introduced in HTML 5. http://www.quackit.com/html_5/tags/html_iframe_tag.cfm
讨论(0)
-
Just a quick note (Because I was having this problem on IE)...
Trying setting:
font-size: 0px;
This worked (I believe because, as someone suggested, the iframes are places on the text baseline).
Goodluck y'all!
讨论(0)
-
An iframe in standards mode is display: inline by default. That means they will be placed on the text baseline, ie. where the bottom of an 'a' ends, not where the bottom of a 'y' does. The gap you're seeing is the space for descenders in the line of text. This should remove it:
iframe { display: block; }
讨论(0)
-
Just add
<style>iframe { vertical-align:bottom; } </style>
or
<style>iframe { display:block; } </style>
<!DOCTYPE html> puts the browser into standards mode, where inline elements are placed on the baseline of the containing block and a space for the character descenders is always allocated in the line box. In other modes, that space is only created when there are printable characters on the same line as the iframes which isn't the case here. Moving the iframe off the baseline by either of the methods above allows the space for the descenders to be placed within the height of the iframe.
讨论(0)
加载中...
- 热议问题