About the overlap of margin value and vertical margin in CSS

Margin of parallel boxes (overlap of double margins) interview question: If one box has a top margin and the other box has a bottom margin, will there be a margin overlap problem? Solution: Take the larger value, not the sum of their values, but the one with the larger value will prevail!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .box1,.box2{
    width: 200px;
    height: 200px;    
    }
    .box1{
    background-color: #f90;
    margin-bottom: 20px;
    }
    .box2{
    background-color: aqua;
    margin-top: 50px;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

Margin and padding have the same orientation and value, in clockwise direction (up, right, bottom, left). Click to view "Padding and abbreviations for CSS box model"

This is the end of this article about margin values and vertical margin overlap in CSS. For more information about margin and vertical margin overlap, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: HTML cellpadding and cellspacing attributes explained in pictures

>>: How to connect to a remote docker server with a certificate