margin外边距和padding内边距的直观区别和使用场景

最新推荐文章于 2024-05-30 11:27:58 发布

just a little

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1.9k

点赞数 22

分类专栏： vue3+ts前端 CSS 文章标签：前端 css 经验分享程序人生

本文链接：https://blog.csdn.net/weixin_46689373/article/details/135511790

版权

vue3+ts前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

margin外边距和padding内边距的直观区别和使用场景

前言
一、块级元素与行内元素
二、margin外边距
二、padding内边距
三、margin和padding的使用场景

前言

刚开始接触css样式肯定避免不了要好好认识和学习一下margin和padding这两个家伙，接下来我对这两家伙进行详细记录总结一番。

一、块级元素与行内元素

在进入正题之前我们先来了解一下什么是块级元素，什么是行内元素。
①块级元素：比如：div标签，h标签，这些都是块级元素，块级元素的特点是：块级元素独占一行，而且块级元素中能写行内元素和块级元素。
②行内元素：比如常用的span标签，行内元素的特点：行内元素不独占一行，行内元素能写行内元素，但是不能写块级元素。

二、margin外边距

相信大家应该都对这个图不陌生，也称盒子模型。
在这里插入图片描述

margin外边距是指元素与元素之间的距离，控制块级元素之间的距离，是针对元素与元素而言的，也就是标签和标签的距离，margin用来布局分开元素使得元素互不相干。
我们先来看一串代码：

<body>
    <div class="parent">
        <div class="one">1</div>
        <div  class="two">2</div>
    </div>
</body>
<script>

        .parent{
            background-color: whitesmoke;
            width:400px;
            height: 400px;
            border:1px solid black
        }
        .one{
          //class等于one的div标签的margin为10px，意思是将该标签上下左右距离class等于two的div标签10px.
            margin:10px;
            background-color: aqua;
            width:100px;
            height: 100px;
        }
        .two{
            background-color: red;
            width:100px;
            height: 100px;
        }
</script>

效果图如下：
在这里插入图片描述

上面的效果图很直观就能体现到，在class=one的标签元素中设置了margin，说明该元素与其他元素之间的上下左右距离为10px。
上外边距：margin-top
右外边距：margin-right
下外边距：margin-bottom
左外边距：margin-left
其中margin的值有四种简写方法：
①margin:10px;//顺时针表示上右下左分别是10px
②margin：20px 30px;//表示上下左右分别是20px,20px,30px,30px
③margin：20px 30px 40px;//顺时针表示上右下左分别是20px,30px,40px,30px
④margin:10px 20px 30px 40px;//顺时针表示上右下左分别是10px,20px,30px,40px

二、padding内边距

padding内边距是指元素的内容物与元素边框的距离，针对的是内容物与元素边框的距离，让内容与包裹元素之间存在一段距离。看如下代码：

<body>
    <div class="one">我是内容物</div>
</body>
<script>
.one{
     padding:30px;
     background-color: aqua;
     width:200px;
     height: 200px;
     }
</script>

效果图如下：
在这里插入图片描述

通过键盘F12键打开样式和盒子模型，本来标签的宽高是200px，但是运行的结果图却是260px，可以明显得出一个结论：padding会撑大盒子，也就是会把标签的长宽撑大。

上内边距：padding-top
右内边距：padding-right
下内边距：padding-bottom
左内边距：padding-left
其中padding的值有四种简写方法：
①padding:10px;//顺时针表示上右下左分别是10px
②padding：20px 30px;//表示上下左右分别是20px,20px,30px,30px
③padding：20px 30px 40px;//顺时针表示上右下左分别是20px,30px,40px,30px
④padding:10px 20px 30px 40px;//顺时针表示上右下左分别是10px,20px,30px,40px

三、margin和padding的使用场景

1.使用margin的场景：
①若需要在border外侧添加空白时。
②空白处不需要背景（色）时。
③需要使用负值对页面布局时（margin值可以取负值，但是padding不行）
④上下相连得两个盒子之间的空白需要相互抵消时，如15px+20px得margin，将得到20px的空白。（margin折叠）
2.使用padding的场景
①需要在border内侧添加空白时
②空白处需要背景（色）时
③上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白。