CSS 外边距

最新推荐文章于 2024-02-04 20:15:08 发布

点点滴滴25

最新推荐文章于 2024-02-04 20:15:08 发布

阅读量979

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41325698/article/details/101903722

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

属性: margin-left
值：数字
指的是元素边框和元素边框之间的距离

注：像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。为了观察上下外边距的效果，可以采用块级元素，比如div.

<style>
.red{
   border:1px solid red;
   background-color:green;
}
 
.margin{
   border:1px solid red;
   background-color:green;
   margin-left:10px;
}
 
</style>
 
<span class="red"> 无外边距的span  </span>
<span class="red"> 无外边距的span  </span>
 
<br/>
 
<span class="red"> 无外边距的span  </span>
<span class="margin"> 有左外边距的span  </span>

<style>
.red{
   border:1px solid red;
   background-color:green;
  margin-top:15px;
  margin-bottom:5px;
}

.margin{
   border:1px solid red;
   background-color:green;
   margin-left:10px;
}

</style>

<span class="red"> 无外边距的span  </span>
<span class="margin"> 无外边距的span  </span>

<br/>

<div class="red"> 无外边距的span  </div>
<div class="margin"> 有左外边距的span  </div>

真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px

<style>
.box{
    width:70px;
    padding:5px;
    margin: 10px;
}
 
div{
   border:1px solid gray;
   font-size:70%;
}
</style>
 
<div>
 其他元素
</div>
 
<div class="box">
   内容宽度70px <br><br>
   内边距：5px <br> <br>
   外边距：10px <br>
</div>
 
<div>
 其他元素
</div>