css中外边距

1.内部元素设置margin等，父元素高度不能适应

 .classA {
     height: 200px;
     background-color: cornflowerblue;
     overflow: hidden;   /*解决高度不能适应*/
 }
 .classB {
     width: 1000px;
     height: 100px;
     background-color: red;
     margin: 0 auto;
     margin-top: 50px;
 }

 <div class="classA">
     <div class="classB"></div>
 </div>

效果如上图。

2.div与div外边距

 div {
     width: 200px;
     height: 200px;
     margin: 20px;
 }
 .div1 {
     background: red;
 }
 .div2 {
     background: yellow;
 }

 <div class="div1"></div>
 <div class="div2"></div>

div等块元素，外边距为两者之间最大的。

3.span等行内元素，只有左右边距，没有上下边距。且外边距为两者之和。

 span {
     background: red;
     margin: 20px;
 }

 <span>111</span>
 <span>111</span>
 <span>111</span>

4、div 与span，块元素与行内元素，div的外边距是到span的文字内容边缘。

.div2 {
    background: yellow;

}
span {
    border: red 1px solid;
    padding: 20px;
}

.div2 {
    background: yellow;
    margin:10px;
}
span {
    border: red 1px solid;
    padding: 20px;
}

 5.inline-block的元素，或者图片与行内元素的内容的底部对齐，与padding等无关。

.div2 {
    background: yellow;
    display: inline-block;
}
span {
    border: red 1px solid;
    padding: 20px;
}

<div class="div2"></div>
<span>111</span>
<span>111</span>
<span>111</span>