内边距与外边距

最新推荐文章于 2024-07-26 19:29:32 发布

jwz934738949

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量2.3k

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/89242463

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

1、内边距

内边距就是边框与内容之间的距离

格式：

padding-top:

padding-right:

padding-bottom:

padding-left:

padding: 上右下左

当省略上右下左中的一个时，默认与对面的值保持一致，即下对应上、左对应右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            padding-top: 10px;
        }

        .c2 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            padding-right: 10px;
        }

        .c3 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            padding-bottom: 10px;
        }

        .c4 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            padding-left: 10px;
        }

        .c5 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            padding: 10px 15px 20px 25px;
        }

    </style>
</head>
<body>
<div class="c1">
    我是内容我是内容我是内容
    我是内容我是内容我是内容
    我是内容
</div>
<div class="c2">
    我是内容我是内容我是内容
    我是内容我是内容我是内容
    我是内容
</div>
<div class="c3">
    我是内容我是内容我是内容
    我是内容我是内容我是内容
    我是内容
</div>
<div class="c4">
    我是内容我是内容我是内容
    我是内容我是内容我是内容
    我是内容
</div>
<div class="c5">
    我是内容我是内容我是内容
    我是内容我是内容我是内容
    我是内容
</div>
</body>
</html>

2、外边距

外边距是标签与标签之间的距离

格式：

margin-top:

margin-right:

margin-bottom:

margin-left:

margin: 上右下左

当省略上右下左中的一个时，默认与对面的值保持一致，即下对应上、左对应右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .box1 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
        }

        .box2 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            margin-right: 30px;
        }

        .box3 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
        }

        .box4 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            margin-left: 10px;
        }

        .box5 {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            margin: 5px 10px 15px 20px;
        }
    </style>
</head>
<body>
<span class="box1">我是内容</span><span class="box2">我是内容</span><span
        class="box3">我是内容</span><span class="box4">我是内容</span><span class="box5">我是内容</span>
</body>
</html>

当两个标签同时设置外边距时，在水平方向会叠加；

当设置一个标签右外边距为10px，相邻标签左外边距为20px，则两个标签的距离为30px。

在垂直方向会合并；

当一个标签的下外边距为10px，下面的标签为20px，则两标签的距离为20px。

jwz934738949

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
内边距与外边距

1、内边距内边距就是边框与内容之间的距离格式：padding-top:padding-right:padding-bottom:padding-left:padding: 上右下左当省略上右下左中的一个时，默认与对面的值保持一致，即下对应上、左对应右<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫

专栏目录