css中外边距

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

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

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

效果如上图。

2.div与div外边距

div {
     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>