CSS层叠样式表—CSS内外边距属性

最新推荐文章于 2023-12-19 15:56:44 发布

来聊前端

最新推荐文章于 2023-12-19 15:56:44 发布

阅读量823

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36893834/article/details/132057730

版权

CSS 内外边距属性

学习目标

在这里插入图片描述

内边距（padding）

内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。

在这里插入图片描述

padding局部样式

从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。

语法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

属性	作用
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding-top:20px;
            padding-right:40px;
            padding-bottom:60px;
            padding-left:80px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>padding属性学习</div>
</body>
</html>

padding属性简写形式

跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding写法有3种，如下所示。

语法：

padding: 像素值;
padding: 像素值1 像素值2;
padding: 像素值1 像素值2 像素值3;
padding: 像素值1 像素值2 像素值3 像素值4;

说明：

padding:20px表示4个方向的内边距都是20px。

padding:20px 40px表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

padding:20px 40px 50px表示padding-top20px，padding-right和padding-left为40px ,padding-bottom为50px。

padding:20px 40px 60px 80px表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素的内边距。
padding:5px 10px;	2个值，代表上下是5px，左右是10px像素的内边距。
padding:5px 10px 15px;	3个值，代表上5px，左右10px,下是15px;
padding:5px 10px 15px 20px;	4个值，代表上5px，右10px，下15px，左20px；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:40px 80px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>padding属性学习</div>
</body>
</html>

外边距（margin）

外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的。

在这里插入图片描述

margin局部样式

从CSS盒子模型中我们可以看出，外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left。

语法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>margin属性</div>
</body>
</html>

为什么加上margin跟没加一样呢？看不出有什么区别啊。

外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。上面我们没有加入其他元素当参考对象，肯定看不出来啊。

举例：只有父元素，没有兄弟元素时

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            display: inline-block;      /*将块元素转换为inline-block元素*/
            border:1px solid blue;
        }
        #son
        {
            display:inline-block;       /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">margin属性学习</div>
    </div>
</body>
</html>

举例：有兄弟元素时

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father {
            display: inline-block;      /*将块元素转换为inline-block元素*/
            border:1px solid blue;
        }
        #son {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
        .brother {
            height:50px;
            background-color:lightskyblue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="brother"></div>
        <div id="son">margin属性学习</div>
        <div class="brother"></div>
    </div>
</body>
</html>

margin简写形式

跟padding一样，margin也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。其中margin写法也有3种，如下所示。

语法：

margin: 像素值;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3 像素值4;

说明：

margin:20px表示4个方向的外边距都是20px。

margin:20px 40px表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。

margin:20px 40px 60px 80px表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin:40px 80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>margin属性简写形式</div>
</body>
</html>

浏览器审查元素

在实际开发中，为了更好地进行布局，我们需要获取某一个元素的盒子模型是怎样的，padding是多少，margin又是多少，然后再进行计算。那怎样才可以快速查看元素的盒子模型信息呢？我们可以通过浏览器自带功能“审查元素”来实现。

绝大多数主流浏览器操作是相似，下面我们以Chrome浏览器为例说明一下。

【第1步】：鼠标移到你想要的元素上面，然后按一下右键，选择“检查”（或者按Ctrl+Shift+I），如下图所示。

在这里插入图片描述

【第2步】：在弹出的控制台中，我们可以找到该元素的盒子模型，如下图所示。

在这里插入图片描述

课程总结

在这里插入图片描述

来聊前端

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表—CSS内外边距属性

内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。语法：属性作用padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距padding属性简写形式跟border属性
复制链接

扫一扫