首页 > 代码库 > css中外边距

css中外边距

2024-09-07 22:23:31   215人阅读

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>

 

技术分享

 

css中外边距


联系
我们