<html lang=“en”><head> <meta charset=“UTF-8”> <title>Title</title> <style> .parent{ width: 500px; height: 500px; background-color: darkgray; /border: 1px solid;/ /padding-top: 1px;/ /margin-left: 10px;/ /margin-top: 150px;/ } .son{ width: 100px; height:100PX; } .son1{ background-color: chartreuse; display: inline-block; margin-right: 10px; margin-bottom: 10px; } .son2{ background-color: violet; display: inline-block; margin-left: 50px; } .son3{ background-color:red; margin-top: 50px; display: inline-block; margin-bottom: 10px; margin-right: 50px; } .son4{ background-color: aqua; margin-top: 50px; margin-left: 50px; } </style></head><body><!–margin重叠问题–><div class=“parent”> <!–1.同级元素之间重叠–> <!–1.1水平方向margin重叠相加–> <!–<span class=“son1”>son11</span>–> <!–<span class=“son2”>son12</span>–> <!–1.2垂直方向margin重叠取大值–> <!–<div class=“son son1”>son1</div>–> <!–<div class=“son son2”>son2</div>–> <!–<div class=“son son3”>son3</div>–> <!–<div class=“son son4”>son4</div>–> <!–1.3解决垂直方向重叠问题–> <!–BFC–> <!–float的值不为none–> <!–overflow的值不为visible–> <!–display的值为inline-block、table-cell、table-caption–> <!–position的值为absolute或fixed–> <!–2.父子元素之间重叠–> <!–2.1水平方向margin重叠–> <!–2.2水平方向margin重叠–> <!–<div class=“son son4”></div>–> <!–2.3解决垂直方向重叠–> <!–给父元素添加padding-top值–> <!–给父元素添加border值–> <!–BFC–> <!–3.margin百分比–> <!–普通元素的百分比margin：都是相对于父元素的宽度计算的–> <!–4.margin无效的情况–> <!–inline水平元素的垂直margin无效–> <!–display: table-cell的元素margin无效–></div></body></html>```