Margin-Top 将外部 div 向下推 [英] Margin-Top push outer div down

问题描述

我有一个标题 div 作为我的包装 div 中的第一个元素，但是当我在标题 div 内向 h1 添加一个上边距时，它会将整个标题 div 向下推.我意识到每当我将上边距应用于页面上的第一个可见元素时就会发生这种情况.

这是一个示例代码片段.谢谢！

div#header{宽度:100%；背景色:#eee;位置:相对；}div#header h1{文本对齐:居中；宽度:375px；高度:50px；边距:50px 自动；字体大小:220%；背景: url('../../images/name_logo.png') 不重复；}

<h1>标题</h1><ul id="导航栏"></ul>

解决方案

put overflow:auto 在父 div
在此链接中查看更多信息

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 将外部 div 向下推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！