Hello.

I suffer for a long time, but it is very necessary!

Task:

There are 3 blocks:

1 - block (parent) width: 100%
2 - block (nested in the first) width: 100% margin: 10px;
3 - block (embedded in the second) width: 100% margin: 10px;

Question: How to make so that the 2nd and 3rd blocks, when the screen size is changed, keep the indents of 10px from the genitive, and the 3rd from the 2nd?

    1 answer 1

    <div class="parent bg-red"> <div class="child bg-orange"> <div class="subchild bg-yellow"></div> </div> </div> <style> .parent { height: 200px; /* для демонстрации */ width: 100%; } /** * Не задавайте ширину. Она будет рассчитана автоматически. * Блочные элементы по умолчанию занимают 100% ширины родителя. */ .child, .subchild { margin: 10px; } .parent, .child, .subchild { /* Вот тут вся магия. Этим правилом мы запрещаем схлопывание отступов */ overflow: auto; } /* Далее все для демонстрации */ .child { height: 150px; } .subchild { height: 100px; } .bg-red { background-color: #FF4136; } .bg-orange { background-color: #FF851B; } .bg-yellow { background-color: #FFDC00; } </style>

    Read the article " Collapsing indents " to better understand how it works.

    Suppose that in the lower block is a child element, which has an upper indent. From the block model, it follows that such an indent shifts the child downward relative to the top edge of the parent. However, taking into account the collapsing indents, the result will be different. The indent will go out of the block and set the distance between the upper block and the parent element.

    • Great magic thanks, I'll know. - Alexander Sizintsev
    • @AlexanderSizintsev I forgot to immediately add overflow: auto to the parent element. This is now fixed. - VenZell
    • as an option, instead of margin, you can use padding for parent elements ..... - pepel_xD