Почему margin дочернего блока не меняет размер родительского блока?

Question

[kapitansen]

Например, тут - clip2net.com/s/3KiHiXw
Чую, что забыл что-то, не могу вспомнить что. С нуля давно не верстал.

<div class="container-fluid greenbg">
            <div class="container">
                <div class="titleblock">
                    <h1>15 причин  заказать токарную и фрезерную обработку <br> в компании «ООО ооо»:</h1>
                </div>
                <div class="bullet">
                    <img src="img/halfgear.png" alt="">
                    <h4>Опытный персонал</h4>
                    <p>Почему margin дочернего блока не меняет размер родительского блока?</p>
                </div>
                <div class="bullet">
                    <img src="img/halfgear.png" alt="">
                    <h4>Опытный персонал</h4>
                    <p>Почему margin дочернего блока не меняет размер родительского блока?.</p>
                </div>
                <div class="bullet">
                    <img src="img/halfgear.png" alt="">
                    <h4>Опытный персонал</h4>
                    <p>Почему margin дочернего блока не меняет размер родительского блока?.</p>
                </div>
                <div class="bullet">
                    <img src="img/halfgear.png" alt="">
                    <h4>Опытный персонал</h4>
                    <p>Почему margin дочернего блока не меняет размер родительского блока?.</p>
                </div>
                <div class="bullet">
                    <img src="img/halfgear.png" alt="">
                    <h4>Опытный персонал</h4>
                    <p>Почему margin дочернего блока не меняет размер родительского блока?.</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;
}

Comments

[Ярослав Иванов]

без кода мы тут угадать должны ?

[kapitansen]

Код обычнейший, я думал, что суть в каком-то забытом мной свойстве типа box-sizing.
Изменил вопрос.

[Сергей delphinpro]

Margin collapsing в действии. Загуглите, изучите.

[kapitansen]

Сергей: Спасибо! Оно!

Answer 1

[Андрей Б.]

Читать про margin collapsing
Можно исправить добавив например overflow: auto; для родителя
Пример - https://jsfiddle.net/rvbuxrkk/

Answer 2

[iBird Rose]

если в двух словах - это нормальное поведение margin.
если хочется так как вы желаете:
1) сделать padding-bottom
2) задать border для родителя https://jsfiddle.net/byancced/
3) задать любое значение overflow для родителя, кроме visible

Comments

[Сергей delphinpro]

4)inline-block
5)display:table
6) еще 100500 методов...

Answer 3

[Егор Живагин]

position?

Экстрассенсы в отпуске, помог бы код на codepen

Comments

[kapitansen]

Код обычнейший, я думал, что суть в каком-то забытом мной свойстве типа box-sizing.
Изменил вопрос.