HTML：div内のdivは必ず親の境界にバインドされます

Question

divの親内にdivがあり、親の境界には付けられません。

現在、私はindex.htmlをでHTMLコードを以下ました：

<div id="high_prio_container"> 
    <div class="overlay"> 
     <div class="article_content"> 
      <h1> 
       <strong><span class="text-primary">Some title</span></strong> text</p> 
      <a href="#about" class="fa fa-angle-down page-scroll"></a> 
     </div> 
    </div> 
</div> 

そしてここでは、CSSのコードは次のとおりです。

#high_prio_container{ 
background: url(bootstrap/img/c01.jpg); 
background-size: cover; 
background-position: center; 
background-attachment: fixed; 
background-repeat: no-repeat; 
color: #cfcfcf;} 

#high_prio_container .overlay{ 
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc000000', endColorstr='#66000000',GradientType=0); /* IE6-9 */ 
height: 750px; 
background-attachment: fixed;} 

.article_content{ 
margin-top: 30px; 
padding: 100px; 
margin-left: 5%; 
position: relative; 
padding: 5% 0 0; 
z-index: 1000; 
background-color: gray; 
opacity: 0.5;} 

問題はそれに関係なく、私は何をすべきか、今ではありません、私は子div（.article_content）を親コンテナの境界から移動することはできません。マージンを使用すると、子と親divの間に黒いスペース（マージンのサイズ）が表示されます。

これが何らかの形で理解できることを願っています。私はこの問題を説明するために、この写真を作っ：

Answer 1

。あなたがそれを解決する方法はたくさんあります。

一つの方法は、使用後のCSSです：

#high_prio_container .overlay{ 
    padding: 0.1px; 
} 

Working Demo

それはposition: absolute;.article_contentへ

それとも

display: inline-block;から.article_content

01を与えるもう一つの方法

Answer 2

（あなたが透明な背景を持っている場合、あるいは子コンテナ）親コンテナ内のパディングと協力して何に働くだろう。だから、使用することができます：それは、margin-collapsingと呼ばれる

.overlay { 
    padding-top: 30px; 
}