Question

当我开始使用谷歌搜索这个问题时，我看到了大量相似的SO问题。但我尝试了所有这些，没有运气。

我从某个地方获得了白色边缘。不知道在哪里。

这是一个小提琴 https://jsfiddle.net/ayezee33/smxdewam/

这是我尝试过的。

添加保证金：0;和填充：0;到html和body。
链接了normalize.css
在块级元素和子元素
找到插入8px边距（Chrome）的用户代理样式表
使用！important调用覆盖
注意到用户代理样式表正在将块应用于我的和试图覆盖它，但我确信我真的想要那个。

任何帮助都会很棒。我想疯狂地试图解决这个问题。

显然我需要添加代码才能发布此问题？

<header>
    <h1>Building blocks are important!</h1>
    <p>This website serves as my test to showcase my coding abilities</p>
        <div id="cta">
            <input id="cta" name="email" placeholder="Email">
            <button type="submit">Learn More</button>
        </div>  
</header>   

<div class="callout">
    <p>Testing this call out section</p>

</div>  


.callout {
display:block;
max-width:100%;
height:5em;
background:#000;
text-transform:uppercase;
}
.callout p {
line-height:5em;
margin:0;
}

Answer 1

空间来自#cta：

的边距

  margin: 1em auto;

简化你的css，我觉得你不需要你的大部分规则。

Answer 2

#cta DIV上的边距是导致白色空间的边距。您可以在标题中添加overflow:hidden，以解决问题。

<nav>
    <div id="main-nav">
        <img src="img/logo.jpg" />
        <ul>
            <li><a href="#">Nav 1</a></li>
            <li><a href="#">Nav 2</a></li>
            <li><a href="#">Nav 3</a></li>
            <li><a href="#">Nav 4</a></li>
        </ul>
    </div>      
</nav>

<header>
    <h1>Building blocks are important!</h1>
    <div id="cta">
        <input id="cta" name="email" placeholder="Email" />
        <button type="submit">Learn More</button>
    </div>
</header>   

<div class="callout">
    <p>Testing this call out section</p>

</div>  

header {
    overflow: hidden;
}

页脚Div上方的额外空白区域

2 个答案: