第12天 - 16天搞定前端，CSS的边距，内外有别？

多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。

12.1 内外抉择

在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。

这是用padding的学问

（1）需要在border内侧添加空白，在文字与边框留有距离时；

（2）空白处需要背景色时；

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

这是用margin的学问

（1）需要在border外侧添加空白时;

（2）空白处不需要有背景色时;

(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。

12.2 内外有别

在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。

在CSS表文件ys2.css中的代码

/*单独指定一个边距*/
.one-margin {
    margin-left: 100px;
}

/*4个边距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代码

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一个值：4个边距;<br/>
        margin两个值：上下边距、左右边距;<br/>
        margin三个值：上边距、左右边距、下边距;<br/>
        margin四个值：上边距、右边距、下边距、左边距。
    </div>
    <div class="use-padding">
        padding一个值：4个边距;<br/>
        padding两个值：上下边距、左右边距;<br/>
        padding三个值：上边距、左右边距、下边距;<br/>
        padding四个值：上边距、右边距、下边距、左边距。<br/>
        为了区分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

输出结果

好了，有关CSS边距的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>


    <style>
        <!-- p{ -->
            <!-- color: #FF0000; -->
            <!-- font-size: 30px; -->
            <!-- text-align: center; -->
            <!-- line-height: 200px; -->
            <!-- /* -->
                <!-- border 边框 -->
             <!-- */ -->
            <!-- border: 1px solid red; -->

        <!-- } -->
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            height: 1482px;
            width: 1000px;
            /*
                背景
             */
            background: url("image/1.jpg") no-repeat center;
        }
		p{
			color:red;
			font-size:13px;
			font-family:'楷体';
		}
    </style>
</head>
<body>
	<!-- <p>你好</P> -->
    <div><p>你是我得不到的女孩</p>
  </div>
</body>
</html>

素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。