Dealing with height in percent [HTML / CSS] [duplicate]

Navigation
0

Good evening. I am learning technology for front-end programming and came across a program when setting the page size in percent. I have a DIV and within these DIV I have two more, thus: 

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

When I try to set a top margin for child 1 in percent, that margin is applied to the parent, but I wanted child 1 to have a margin inside the parent div.

I'll send the HTML and CSS in the pastebin and I'll attach the print to the screen.

HTML: link CSS: link

I wanted this black square to have a margin over the green split.

    
asked by anonymous 06.12.2018 / 22:12

1 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 it , a behavior known as margin collapsing.

Read more about margin collapsing here.

To resolve your specific case, you should add the overflow:auto property to the div class content.msg.

In this way:

CSS 

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

You can better understand the overflow property in this w3schools article .

    
07.12.2018 / 11:33
Beginner - Unexpected behavior in a variable How to open a link in a browser that was clicked on a WebView on Android