这是由于保证金崩溃

Question

我很沮丧，试图解决这个问题，但无法解决它。

我有一个简单的html页面结构：

标题div，正文div和页脚div。

问题在于，正文div（.form-container）的内容会影响正文margin本身的div（.body-container）。

示例：

＆＃13;

body {
  margin: 0px;
}
.header-container {
  height: 250px;
  width: 100%;
  background-color: red;
}
.body-container {
  height: 500px;
  width: 100%;
  background-color: green;
  background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
  height: 150px;
  width: 100%;
  background-color: blue;
}
.form-container {
  margin-bottom: 30px;
  margin-top: 30px;
}

＆＃13;

<div class="header-container"></div>
<div class="body-container">
  <div class="form-container"></div>
</div>
<div class="footer-container"></div>

＆＃13;

如何摆脱身体margin中的div？

Answer 1

这是由于保证金崩溃

这是预期的行为，Mozilla Developer Network声明：

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度，或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

Mastering margin collapsing

在这种情况下，.body-container和.form-container符合条件，因此margin的{{1}}最终会在.form-container之外。

你能做什么？

有许多方法可以阻止此行为，但最简单的方法是在.body-container使用padding代替margin，因为.form-container不会崩溃。< / p>

padding

body {
  margin: 0px;
}
.header-container {
  height: 250px;
  width: 100%;
  background-color: red;
}
.body-container {
  height: 500px;
  width: 100%;
  background-color: green;
  background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
}
.footer-container {
  height: 150px;
  width: 100%;
  background-color: blue;
}
.form-container {
  padding: 30px 0;
}

Answer 2

删除此部分以删除不需要的边距：

        .form-container{
            margin-bottom:30px;
            margin-top:30px;
        }

See this fiddle

修改

如果您想保留空间，可以改用padding-top。

See it here

.form-container{ padding-top : 30px; }

注意

background-color: green;的{{1}}属性未应用，因为下面的.body-container属性设置了白色背景颜色属性：background

Answer 3

在body div中有一个div $(window).resize(function() { if ( ('#cat').height < ('#dog').height ) $( ('#cat').height = ('#dog').height ) else nothing，其中应用了以下css

.form-container

因为此div中没有内容显示顶部和底部边距所以你可以使用.form-container{ margin-bottom:30px; margin-top:30px; }或float:left属性来删除css，或者你可以简单地删除这个css。< / p>

dislay:inline

Answer 4

Add "margin-top:-30px" to the .body-container part

<html>
	<head>
		<style>
			
			body{
				margin:0px;
			}
			
			.header-container{
				height:250px;
				width:100%;
				background-color: red;
			}
			
			.body-container{
              margin-top:-30px;
				height:500px;
				width:100%;
				background-color: green;
				background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;
			}
			
			.footer-container{
				height:150px;
				width:100%;
				background-color: blue;
			}
			
			.form-container{
				margin-bottom:30px;
				margin-top:30px;
			}
			
		</style>
	</head>
	<body>
		<div class="header-container"></div>
		<div class="body-container">
		
			<div class="form-container">
			</div>
			
		</div>
		<div class="footer-container"></div>
	</body>
</html>
► Run code snippetCopy snippet to answer

Answer 5

如果你使标题，正文和页脚div浮动，额外的空格就会消失。

浮动使他们试图粘在一起，但你的宽度：100％确保它们都是页面宽。

我还编辑了一些代码。

＆＃13;

cscript 36443611.vbs
"axb" False
" x " True
"ax" False
"x" True
"\x/" True
"" False

＆＃13;

css父div中的不需要的保证金

5 个答案:

这是由于保证金崩溃

你能做什么？