框模型之内外边距

最新推荐文章于 2022-08-05 10:18:29 发布

407指导员

最新推荐文章于 2022-08-05 10:18:29 发布

阅读量537

点赞数

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109523027

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

内边距属性

之前在表格那里说过：

边框和内容之间的边距就是内边距。

边框与边框之间的间距，就是外边距。

书写格式

1.非连写

padding-top: 5px ;

padding-right: 6px ;

padding-bottom: 3px ;

padding-left: 8px ;

快捷键：

pt/pr/pb/pl+table键

2.连写

padding: 上右下左

注意点：

1.给标签设置内边距时，标签占有的高度和宽度会发生变化。（上下左右方向设置多少宽度，就会向这个方向扩充多少宽度。）

2.连写方式省略规则和边框缩写一样。省略一个，按照对边样式显示，省略三个按照剩下这个样式省略。

3内边距也会有背景颜色。

外边距属性

标签与标签之间的间距，就是外边距。

书写格式

1.非连写格式

margin-top: 5px ;

margin-right: 6px ;

margin-bottom: 3px ;

margin-left: 8px ;

2.连写格式

padding: 上右下左

span {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

<span class="pan1">临兵斗者皆阵列在前</span>
<span class="pan2">临兵斗者皆阵列在前</span>
<span class="pan3">临兵斗者皆阵列在前</span>

在这里插入图片描述

注意：

1.span行内元素无法设置宽高，采用display:inline-block来设置为行内块级元素。

2.上图中span与span之间有间隔，并不是外边距，在字符实体中说了，多个空格，浏览器只会识别一个，上边代码里有回车，浏览器将其当成一个空格，所以上图间距是空格。

3.最开始浏览器打开span也会与页面左侧和上侧有一段外边距。
* {
   padding: 0;
   margin: 0;
}
全局设置内外边距为0

4.外边距那部分是没有颜色的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距属性</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: skyblue;
            margin: 20px 15px 20px 15px;
        }

        div {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
        }

    </style>

</head>
<body>
<span class="pan1">临兵斗者皆阵列在前</span>
<span class="pan2">临兵斗者皆阵列在前</span>
<span class="pan3">临兵斗者皆阵列在前</span><div class="box1"></div>
</body>
</html>

在这里插入图片描述

外边距合并现象

1.在水平方向上的外边距：

两个盒子并排，一个设置左边距50px ,一个设置右边距100px,那这两个盒子之间的外边距变成50+100=150px

2.在垂直方向上的外边距

两个盒子并列，一个设置上边距50px ,一个设置下边距100px,那这两个盒子之间的外边距变成去100px,取大的值。

框模型：https://www.w3school.com.cn/css/css_boxmodel.asp

407指导员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
框模型之内外边距

内边距属性之前在表格那里说过：边框和内容之间的边距就是内边距。边框与边框之间的间距，就是外边距。书写格式1.非连写padding-top: 5px ;padding-right: 6px ;padding-bottom: 3px ;padding-left: 8px ;快捷键：pt/pr/pb/pl+table键2.连写padding: 上右下左注意点：1.给标签设置内边距时，标签占有的高度和宽度会发生变化。（上下左右方向设置多少宽度，就
复制链接

扫一扫