【css】padding 和 margin的区别

最新推荐文章于 2024-07-09 15:07:03 发布

花名时礼

最新推荐文章于 2024-07-09 15:07:03 发布

阅读量2.8k

点赞数 1

分类专栏：前端零碎知识 css

本文链接：https://blog.csdn.net/tyrant_forever/article/details/107856463

版权

前端零碎知识同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

css中有有一对经常是一起出现的属性：padding和margin，接下来我们以一个例子来看一下两个属性的作用及其区别。

实例演示：

使用属性前：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>paddingTest</title>
</head>
<style>
    .class1{
        height: 200px;
        width: 200px;
        background: red;
    }
    .class2{
        height: 100px;
        width: 100px;
        background: green;
    }
    .class3{
        height: 50px;
        width: 50px;
        background: blue;
    }
</style>
<body>
<div class="class1">
    <div class="class2">
        <div class="class3"></div>
    </div>
</div>
</body>
</html>

页面效果：

在第二个div中使用margin属性：

代码更改：

.class2{
        height: 100px;
        width: 100px;
        background: green;
        margin-left: 10px;
    }

页面效果：

可以看到使用margin属性的div与其外部div产生了一段距离

在第二个div中使用padding属性：

代码更改：

.class2{
        height: 100px;
        width: 100px;
        background: green;
        padding-left: 10px;
    }

页面效果：

可以看到使用padding属性的div与其内部div产生了一段距离

总结：

margin控制的是外距离，而padding控制的是内距离。

花名时礼

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【css】padding 和 margin的区别

css中有有一对经常是一起出现的属性：padding和margin，接下来我们以一个例子来看一下两个属性的作用及其区别。实例演示：使用属性前：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>paddingTest</title></head><style> .cl.
复制链接

扫一扫

专栏目录