Handling height in percentage [HTML/CSS]

Question

good evening. I am learning technology for front-end programming and came across a program when setting the page size in percentage. I have a DIV and inside these DIV I have two more, getting like this:

<div class="pai">
    <div class="Filho-1">
    </div>
    <div class="filho-2">
    </div>
</div>

When I try to set a higher margin for child 1 in percentage, this margin is applied to father, but wanted son 1 to have a margin within father div.

I’ll send the HTML and CSS to the Pastebin and attach the screen print.

HTML: https://pastebin.com/LuaG5BQm CSS: https://pastebin.com/smzcGzJn

I wanted that black square to have a margin on the green divide.

Answer 1

The upper and lower margins of the blocks are sometimes combined (collapsed/reduced) to a single margin whose size is the largest of the margins (if the elements have the same margin, one of them will not be added), combined with a behavior known as margin Collapsing.

Read more about margin Collapsing here.

To solve your specific case, you must add the property overflow:auto to the class of div conteudo.msg.

In this way:

CSS

.conteudo-msg{
    background-color: #169C79;
    height: 35%;
    overflow:auto;
}

You can better understand the property overflow in that article of w3schools.