如何删除HTML5中的标题和容器div之间的差距样板

问题描述：

我很想使用Paul Irish的HTML5样板，但是我遇到了一个css问题。如何删除HTML5中的标题和容器div之间的差距样板

我想要在页面顶部刷新页眉，但是我不能添加一个我无法摆脱的空白。

我认为这与页脚的clearfix有关。我试过用不同的填充尺寸为页脚和容器div，但无济于事。

这是html代码：

<header> 
    <p> header content </p> 
</header> 

<div id="main" role="main"> 

</div> 
<footer> 
    <p> footer content </p> 
</footer>

我的自定义CSS：

#container { 
    background-color:orange; 
    padding:1px; /* can't be zero */ 
    margin:0; 
} 

footer { 
    margin: 1px 0; 
} 

body { 
    width:960px; 
    margin:0 auto; 
    background:blue; 
    padding:0; 
}

答

@techjacker;可能是你必须这样写：

header{display:block} 
    p{margin:0;padding:0}

感谢Sandeep，pss做到了诀窍。奇怪的是，这个头文件已经设置为通过html5样板的默认CSS来显示块，所以这个页边距应该将页眉的高度扩展到页面的顶部？ – techjacker

这是因为边缘折叠，p的边缘会反映到头部和上边的边缘。 –

对我来说，它没有设置标题显示块，它已经通过CSS重置 –

答

这有时会帮助：

将边距和填充0
，并确保编码设置为：UTF-8无BOM。

如何删除HTML5中的标题和容器div之间的差距样板

相关推荐