我在 iFrame 之间有烦人的白色 space - 我已经尝试了我能想到的一切

Question

在我的网站上，我的两个 google 涂鸦 iframe 之间有白色 space，并且无法摆脱它。我基本上希望 space 与 pacman 和 soccer 之间的 space 一样大，但它太大了。
标记不是导致它的原因，我不确定问题是在 css 还是 html 中。提前致谢。网站位于：http://blogs.ggs.wa.edu.au/strive/ryan/iMemory/googledoodles.html

<html lang=en>
<div class="webcontainer">
    <div class="articles">
        <div class="heading">
            <head>
                <title> iMemory - Games </title>
                <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
                <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
                <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
                <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
                <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
                <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
                <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
                <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
                <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
                <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
                <link rel="icon" type="image/png" sizes="192x192"  href="images/android-icon-192x192.png">
                <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
                <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
                <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
                <link rel="manifest" href="images/manifest.json">
                <meta name="msapplication-TileColor" content="#ffffff">
                <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
                <meta name="theme-color" content="#ffffff">
                <meta name="description" content="Free Web App designed to organise and memorise content you input into your own account which you can 
                access anywhere and anytime"/>
                <meta name="keywords" content="Organise, Customize, Memorise"/>
                <meta name="author" content="Ryan Bradley"/>
                <link rel="stylesheet" href="styles/style.css" type="text/css"/>
                <script src="//load.sumome.com/" data-sumo-site-id="159e737b29bca598fa43ac7c7405dc459eac8999f385fc0254a2ca7043489618" async="async">
                </script>
            </head>
        </div>
            <body>
                <div class="center">
                    <div class="topbar">
                    </div>
                    <div class="socialmedia">
                        <script type="text/javascript">
                            function newPopup(url) {
                            popupWindow = window.open(
                            url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
                            }
                        </script>
                        <a class="fb" href="JavaScript:newPopup('https://www.facebook.com/iMemoryWebApp');"><img src="images/Facebook_logo_sml.png"  
                            alt="https://www.facebook.com/iMemoryWebApp" title="Click here to visit our Facebook Page..."/></a>
                        <script type="text/javascript">
                            function newPopup(url) {
                            popupWindow = window.open(
                            url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
                            }
                        </script>
                        <a class="g" href="JavaScript:newPopup('https://plus.google.com/117832833332750535434/posts');"><img src="images/gedit.png"  
                            alt="https://plus.google.com/117832833332750535434/posts" title="Click here to visit our Google Plus Page..."/></a>
                        <script type="text/javascript">
                            function newPopup(url) {
                            popupWindow = window.open(
                            url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
                            }
                        </script>
                        <a class="twitter" href="JavaScript:newPopup('https://twitter.com/iMemoryWebApp');"><img src="images/twitteredit.png"  
                            alt="https://twitter.com/iMemoryWebApp" title="Click here to visit our Twitter Page..."/></a>
                        <script type="text/javascript">
                            function newPopup(url) {
                            popupWindow = window.open(
                            url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
                            }
                        </script>
                        <a class="pinterest" href="JavaScript:newPopup('https://www.pinterest.com/iMemoryWebApp/');"><img src="images/pinterestedit.png"  
                            alt="https://www.pinterest.com/iMemoryWebApp/" title="Click here to visit our Pinterest Page..."/></a>
                    </div>
                        <br/>
                        <div class="nav">
                            <ul class="nav nav-pills2">
                                <li class="#"><a href="index.html">Home</a></li>
                                <li class="#"><a href="about.html">About</a></li>
                                <li class="#"><a href="contact_us.html">Contact</a></li>
                                <li class="#"><a href="sign_up.html">Sign Up</a></li>
                                <li class="#"><a href="store.html">Store</a></li>
                                <li class="active"><a href="#" onclick="return false;">Games</a>
                                    <ul class="subnav">
                                        <li class="ready"><a href="googledoodles.html" onclick="return false;">Google Doodles</a></li>
                                        <li><a href="scratchgames.html">Scratch Games</a></li>
                                        <li><a href="yourgames.html">Your Games</a></li>
                                        <li><a href="JavaScript:newPopup('https://scratch.mit.edu/scratch2download/');">Download Scratch</a>
                                        <script type="text/javascript">
                                            function newPopup(url) {
                                            popupWindow = window.open(
                                            url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
                                            }
                                            </script>
                                        </li>
                                    </ul>   
                                </li>       
                                <li class="#"><a href="sign_in.html">Sign In</a></li>
                            </ul>
                        </div>
                        <br>
                    <div class="main">
                        <br>
                        <br>
                        <div class="googledoodles">
                            <iframe class="pacman" src="https://www.google.com/logos/2010/pacman10-hp.html" frameborder="0"></iframe>
                            <br/>
                            <br/>
                            <br/>
                            <iframe class="doodle" src="https://www.google.com/logos/2012/football-2012-hp.html" frameborder="0"></iframe>
                            <br/>
                            <br/>
                            <br/>
                            <iframe class="doodle" src="http://www.google.com/logos/2012/basketball-2012-hp.html" frameborder="0"></iframe>
                            <br/>
                        </div>
                        <br/>
                        <div class= "footer">
                            <hr class="footerline"/>
                            <p class="italic">
                                &copy 2015, iMemory | All rights reserved <br/>
                                Created by Ryan Bradley <br/>
                                Special thanks to eTIP 2015, Jackie Hildebrand and Shane Crosby <br/>
                                <br/>
                            </p>
                            <!-- Start: ©2015 TraceMyIP.org Service Code (100902-07172015)- DO NOT MODIFY //-->
                            <div>
                            <script type="text/javascript" src="//s3.tracemyip.org/tracker/lgUrl.php?stlVar2=1301&amp;rgtype=4684NR-IPIB&amp;pidnVar2=32777&amp;prtVar2=6&amp;scvVar2=12">
                            </script><div style="line-height:0px;"><a href="http://www.tracemyip.org/"><img src="//log.tracemyip.org/tracker/script.gif" alt="track my ip" style="border:0px;">
                            </a></div><noscript><img src="//s3.tracemyip.org/tracker/1301/4684NR-IPIB/32777/6/12/ans/" alt="track my ip" style="border:0px;"></noscript></div>
                            <!-- End: TraceMyIP.org Service Code //-->
                            <br/>
                        </div>
                    </div>
            </body>
        </div>
    </div>
</div>
</html>

CSS

.doodle {
position: relative;
height: 61%;
width: 83%;
transition: all .2s ease-in-out;
}

.doodle:hover {
transform: scale(1.2) ;
}

.pacman {
position: relative;
height: 41%;
width: 65%;
transition: all .2s ease-in-out;
}

.pacman:hover {
transform: scale(1.2) ;
}

Answer 1

这与您的 .doodle class 和许多 <br> 标签的高度有关。我改变了：

.doodle {
position: relative;
height: 61%;
width: 83%;
transition: all .2s ease-in-out;
}

到

.doodle {
position: relative;
height: 225px;
width: 83%;
transition: all .2s ease-in-out;
}

并删除了您的 iframe 之间的所有 <br>，它解决了您遇到的问题。

Answer 2

我认为您对中间涂鸦的高度有疑问。设置成绝对值（比如240px）会好看一点。

我在 iFrame 之间有烦人的白色 space - 我已经尝试了我能想到的一切

I have annoying white space between iFrames - I have tried everything i can think of

html

css

iframe

whitespace

removing-whitespace