css中外边距

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

 1 .classA {
 2     height: 200px;
 3     background-color: cornflowerblue;
 4     overflow: hidden;   /*解决高度不能适应*/
 5 }
 6 .classB {
 7     width: 1000px;
 8     height: 100px;
 9     background-color: red;
10     margin: 0 auto;
11     margin-top: 50px;
12 }
13 
14 <div class="classA">
15     <div class="classB"></div>
16 </div>

效果如上图。

2.div与div外边距

 1 div {
 2     width: 200px;
 3     height: 200px;
 4     margin: 20px;
 5 }
 6 .div1 {
 7     background: red;
 8 }
 9 .div2 {
10     background: yellow;
11 }
12 
13 <div class="div1"></div>
14 <div class="div2"></div>

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

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

 

1 span {
2     background: red;
3     margin: 20px;
4 }
5 
6 <span>111</span>
7 <span>111</span>
8 <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>

 

 

posted @ 2017-03-10 12:03  九许尘歌  阅读(257)  评论(0)  编辑  收藏  举报