iFrame 的 CSS 间距问题答案

【问题标题】：Css spacing issue with iFrameiFrame 的 CSS 间距问题
【发布时间】：2019-08-14 04:58:50
【问题描述】：

连续我有一个 iframe 谷歌地图，下一行有一个地址，但是 iframe 注入了一块空白并将地址推到页面的限制之外，见图；

Codepen 示例 https://codepen.io/grabthereef/pen/PJOYaa

HTML;

<section id="map-section">
                <div class="row">
                    <div class="col-9">
                        <div class="google-map">
                            <iframe src=""
                            height="200" width="100%"
                            frameborder="0" style="border:0"
                            allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="bg-warning col-3">
                        <div class="home-address">
                            <p class="address">
                                Address 1
                                Address 2<br>
                                33-655<br>
                            </p>
                        </div>
                    </div>
                </div>
            </section>

CSS;

#map-section {
    .google-map{
        float: left;
        width: 100%;
    }

    .address{
        font: 2em "Caveat";
        text-align: center;
        text-shadow: 1px 1px 0 rgba(0,0,0,.3);
        padding-top: 2.5em;
        padding-left: 0em;
    }
}

【问题讨论】：

您能否发布一个指向该页面或该问题的工作示例的链接？
您发布的代码没有异常。我们需要看一个有效的例子。
请原谅我的无知，该代码在哪里？在我假设的样式表中？
我刚刚添加了 .body{background: $bg-color;颜色：$字体颜色；边距：0px；填充：0px； box-sizing: border-box;} 但没有解决问题
我添加了这个res.cloudinary.com/paul-seal/image/upload/v1507070620/… 仍然没有乐趣

标签： html css

【解决方案1】：

我通过添加 'overflow-x: hidden;' 解决了这个问题所以;

html,body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

【讨论】：

如果您还没有完成基本的 CSS 浏览器重置，请包括： * {margin:0;padding:0;box-sizing:border-box} html, body {width:100%}