Why margin of the child block does not change the size of the parent block?

For example, here - clip2net.com/s/3KiHiXw
I feel that I forgot something, can't remember what. From scratch have not typeset.

<div class="container-fluid greenbg">
 <div class="container">
 <div class="titleblock">
 <h1>15 reasons to order production when milling and turning <br> the company "OOO,":</h1>
</div>
 <div class="bullet">
 <img src="img/halfgear.png" alt>
 <h4>Experienced staff</h4>
 <p>Why is the margin of the child block does not change the size of the parent unit?</p>
</div>
 <div class="bullet">
 <img src="img/halfgear.png" alt>
 <h4>Experienced staff</h4>
 <p>Why is the margin of the child block does not change the size of the parent block?.</p>
</div>
 <div class="bullet">
 <img src="img/halfgear.png" alt>
 <h4>Experienced staff</h4>
 <p>Why is the margin of the child block does not change the size of the parent block?.</p>
</div>
 <div class="bullet">
 <img src="img/halfgear.png" alt>
 <h4>Experienced staff</h4>
 <p>Why is the margin of the child block does not change the size of the parent block?.</p>
</div>
 <div class="bullet">
 <img src="img/halfgear.png" alt>
 <h4>Experienced staff</h4>
 <p>Why is the margin of the child block does not change the size of the parent block?.</p>
</div>
</div>
 </div>


* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
*:before,
*:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/ / ......


.container-fluid {
 width: 100%;
}

.container {
 max-width: 980px;
 margin: 0 auto;
}

.container.home {
 padding: 60px 0;
 color: #4e4e4e;
}

.container.main {
 color: #4e4e4e;
}

.greenbg {
 background: #32964d;
}

.greenbg .titleblock {
 padding: 24px 0 40px;
}

.greenbg .titleblock h1 {
 margin: 35px 0;
 color: #fff;
}

.bullet {
 margin-left: 65px;
 margin-bottom: 55px;
}

.bullet img {
 float: left;
 margin-right: 20px;
}

.bullet h4 {
 margin: 0 0 8px 0;
 color: #fff;
 text-transform: uppercase;
}

.bullet p {
 color: #fff;
 max-width: 800px;
 line-height: 1.2;
}
June 26th 19 at 14:11
3 answers
June 26th 19 at 14:13
Solution
Read about margin collapsing
You can fix such as adding overflow: auto; for the parent
Example - https://jsfiddle.net/rvbuxrkk/
June 26th 19 at 14:15
Solution
in a nutshell - this is normal behavior margin.
if you want as you wish:
1) make a padding-bottom
2) set border for a parent https://jsfiddle.net/byancced/
3) set any value of overflow for the parent, in addition to visible
4)the inline-block
5)display:table
6) still 100500 methods... - Lulu_Zulauf71 commented on June 26th 19 at 14:18
June 26th 19 at 14:17
position?

Extrasense on vacation, would the code on codepen
Code usually, I thought the point in some forsaken me the type property box-sizing.
Changed the question. - Lulu_Zulauf71 commented on June 26th 19 at 14:20

Find more questions by tags CSSHTML