overflow:hidden on div tag affects background color

Question

The definition of overflow:hidden states that :

the overflowing content is completely hidden, not accessible to the user.

from: http://

Answer 1

Your color is set to the parent of your paragraph. You have nothing stopping the height of your parent div to expand as far as it wants, so the paragraph margins are making the parent height larger.

If you were to give a set height to your parent (18px or so) then it will hide the margins (and text technically)

div {
    height:18px;
}

https://jsfiddle.net/gd62qmr3/3/

If you were to set the color to your paragraph, then you will not see the background color in the margins

div {
    overflow:hidden;
}
div p {
    background-color:green;
    margin:20px 0;
}

https://jsfiddle.net/gd62qmr3/4/