html css样式边距未包裹

Question

我对以下css有些疑问。

＆＃13;

＆＃13;

.mainform{
  margin:50px 20px;
  background-color:#444;
  width:100%;
  height:80px;
}

.scontainer{
  background-color:#999;
}

＆＃13;

<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我得到了以下结果。   保证金的一部分没有背景颜色，即使＆＃34; scontainer＆＃34; div包裹了＃34; mainform＆＃34; DIV。
 为什么主体的边缘部分没有背景颜色，尽管父颜色有背景颜色？
  请帮帮我 谢谢。

Answer 1

在父级上使用填充而不是在子级上使用边距。

看看这个片段：

＆＃13;

＆＃13;

.mainform{
  background-color:#444;
  width:100%;
  height:80px;
}

.scontainer{
  background-color:#999;
  padding:50px 20px;
}

＆＃13;

<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加边框以明确元素

scontainer有background：gray，它有一个宽度为100％，高度为80px的mainform子元素。 mainform在scontainer中取边距，如果没有提到边框，scontainer只有背景颜色，所以只显示mainform的样式，让边缘区域的颜色尝试添加边框中提到的边框或指定高度和容器上的宽度

.mainform{
    margin:50px 20px;
    background-color:#444;
    width:100%;
    height:80px;
  border:1px dashed green;
  }

  .scontainer{
    background-color:gray;
    border:1px solid yellow;
  }

<style>
    
</style>
<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

希望有所帮助

Answer 3

如果您的边距背景颜色为scontainer div颜色，只需为scontainer指定一个绝对位置。它会出现你想要的。

<style>

   .mainform{
    margin:50px 20px;
    background-color:#444;
    width:100%;
    height:80px;
  }

  .scontainer{
    background-color:#999;
	width: 100%;
	position: absolute;
  }
</style>


<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

希望这有帮助！

Answer 4

在父级中添加overflow:hidden;。这是由于 block formatting context

＆＃13;

＆＃13;

.scontainer {
  background-color: #999;
  overflow: hidden;
}
.mainform {
  margin: 50px 20px;
  background-color: #444;
  width: 100%;
  height: 80px;
}

＆＃13;

<div class="scontainer">
  <div class="mainform">
    TST

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;