HTML: Strange space between iframe elements?_问答_开发者

Question:

Consider the following HTML:

<html>
<head></head>

<body>

<div style="float:left;">
  <div style="background-color: Red; padding-top: 2mm; padding-bottom: 2mm;">
        Dock: Usage controls/symbol list here
    </div>


    <div style="height: 300px; background-color: Khaki; display:block; float:left; overflow: scroll;">

        <ul style="background-color: White; float: left; margin: 0px; padding: 0px; padding-left: 30px; padding-right: 10px;">
            <li>
                <a href="Folders/Content/Inbox" target="ifrmFolderContent" >
                    Posteingang / Inbox
                </a>
            </li>
            <li>
                <a href="Folders/Content/Drafts" target="ifrmFolderContent" >
                    Entwürfe / Drafts
                </a>
            </li>
            <li>
                <a href="Folders/Content/Sent Items" target="ifrmFolderContent" >
                    Gesendet / Sent Items
                </a>
            </li>
            <li>
                Archiv / Archive
            </li>
            <li>
                Papierkorb / Trash
            </li>
            <li>
                Junk / Crap
            </li>
            <li>
                Scam
            </li>
            <li>
                Spam
            </li>
            <li>
                Virus
            </li>
            <li>
                Abrufen / Send & Receive
            </li>
            <li>
                Verfassen / Compose
            </li>
            <li>
                Adressbuch / Address book
            </li>
        </ul>
    </div>




    <div style="width: 400px; height: 300px; background-color: Green; display:block; float:left; margin: 0px; padding: 0px;">



       <iframe marginwidth="0" marginheight="0" hspace="0" vspace="0"  name="ifrmFolderContent" src="http://www.yahoo.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">

         Folder Content
       </iframe>



       <iframe marginwidth="0" marginheight="0" hspace="0" vspace="0"  name="ifrmEmail" src="http://www.msn.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">

         E-Mail Content

       </iframe>



    </div>



    <div style="background-color: Indigo; padding-top: 2mm; padding-bottom: 2mm; clear: left;">
        Copyright here
    </div>

</div>



</body>

</html>

It renders exactly as one would expect (Chrome + I开发者_开发百科E8).

But now, I add:

<!DOCTYPE html>

on top of it.

And suddenly, I get 2 to 5 mm of green space between the two iframes (folder content / email content), in both Chrome and IE8 (haven't tested FireFox). What is even more disturbing, there seems to be no way to get rid of this space (except from removing <!DOCTYPE html>.

Why? I mean, the green comes from the background-color of the parent element, but why is there some space between the two iframes ?

Just add

<style>iframe { vertical-align:bottom; } </style>

<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.

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: