页脚上方的额外空白区

当我开始使用Google搜索这个问题时，我看到了类似的SO问题过多。但我尝试了所有，没有运气。页脚上方的额外空白区

我从某处获得白边。不知道在哪里。

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

这是我都试过了。

加边距：0;和填充：0;到html和body。
拉上normalize.css
新增0保证金的块级元素和子元素
找到
使用的！重要的电话覆盖用户代理样式表插入8像素余量（铬），其
注意到用户代理样式表应用阻止我和试图覆盖，但我确定我真的想要的。

任何帮助将是伟大的。试图弄清楚这一点我疯了。

显然我需要添加代码来发布这个问题？

<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; 
}

来源

2015-05-19 AyeZee33

在那个小提琴中有很多空白，你将不得不更加具体地指出你遇到的问题。 – Shaggy

的空间从利润率来对你#cta：

margin: 1em auto;

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

来源

2015-05-19 15:15:16

啊，我觉得哑巴。谢谢。这确实是问题。我是自学成才的，并试图找到更好的清洁代码习惯。任何需要特殊清洁的ID？或者只是一般的整理东西？ – AyeZee33

np。也不要使用ID来定位CSS。改用类。仅对JavaScript钩子使用ID。 ID对于模块化开发并不灵活。另外，如果答案对您有帮助，请接受答案。 –

，并尽可能远离黑客。编写最简单的CSS，然后逐步增强您的CSS。稀疏地使用hack并让文档自然呈现。这保证了跨浏览器的一致呈现。 –

#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; 
}

来源

2015-05-19 15:15:34 chrisbedoya

页脚上方的额外空白区

回答

相关问题