Margin-Top推下外圈 [英] Margin-Top push outer div down

问题描述

我有一个头div作为我的包装器div中的第一个元素，但是当我添加一个顶部边缘到头部div中的h1，它推动整个头部div。我知道这种情况发生时，我应用顶部边距页面上的第一个可见元素。

以下是示例代码段。感谢！

  div＃header {width：100％; background-color：#eee; position：relative;} div＃header h1 {text-align：center; width：375px; height：50px; margin：50px auto; font-size：220％; background：url（'../../ images / name_logo.png'）no-repeat;}  

 < div id =header> < h1>标题< / h1> < ul id =navbar>< / ul>< / div>  

解决方案

在 div overflow：auto >

在此链接中查看更多

I have a header div as the first element in my wrapper div, but when I add a top margin to a h1 inside the header div it pushes the entire header div down. I realize this happens whenever I apply a top margin to the first visible element on a page.

Here is a sample code snippet. Thanks!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

解决方案

put overflow:auto in the parent div
see more in this link

这篇关于Margin-Top推下外圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！