css 父项中不需要的边距 div

Question

我对解决这个问题感到沮丧，但无法解决它。

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

页眉 div、正文 div 和页脚 div。

问题是正文 div (.form-container) 的内容会影响正文 div 本身 (.body-container) 的 margin。

示例：

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

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

如何去除体内的这个 margin div？

Answer 1

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

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

See this fiddle

编辑

如果您想保留 space，可以使用 padding-top。

See it here

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

备注

不应用.body-container的属性background-color: green;，因为下面的background属性有白色背景色属性在这里设置：background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;

Answer 2

正文div中有一个div.form-container，其中应用了以下css

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

因为这个 div 中没有内容，它显示顶部和底部边距，所以你可以使用 float:left 或 dislay:inline 属性你不能删除 css 或者如果你可以简单地删除这个 css.

<html>
 <head>
  <style>
   
   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;
    float:left;
   }
   
  </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>

Answer 3

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 4

这是由于保证金崩溃

这是预期的行为，Mozilla 开发者网络指出：

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Mastering margin collapsing

在这种情况下，.body-container 和 .form-container 满足条件，因此 .form-container 的 margin 最终在 .body-container 之外。

你能做什么？

有多种方法可以阻止此行为，但最简单的方法是在 .form-container 上使用 padding 而不是 margin，因为 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;
}

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

Answer 5

如果让页眉、正文和页脚 div 浮动，多余的 space 就会消失。

浮动让它们试图粘在一起，但你的 width: 100% 确保它们每个都是页面宽度。

我也稍微编辑了你的代码。

                    <html>
                <head>
                  <style>

                  body{
                    margin:0px;
                }

                .header-container{
                    height:250px;
                    width:100%;
                    background-color: red;
                    float: left;
                }

                .body-container{
                    height:500px;
                    width:100%;
                    background: url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left;
                    float: left;
                }

                .footer-container{
                    height:150px;
                    width:100%;
                    background-color: blue;
                    float: left;
                }

                .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>

css 父项中不需要的边距 div

css Unwanted Margin in Parent div

html

css

margin

这是由于保证金崩溃

你能做什么？