CSS3中的margin和padding

Nicholas___

已于 2022-04-09 13:45:12 修改

阅读量203

点赞数

分类专栏：前端文章标签： css3 css html5

于 2021-10-19 18:02:53 首次发布

本文链接：https://blog.csdn.net/Nicholas___/article/details/120849862

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近关于margin和padding有很多困惑，找了一些资料实践一下，做了一些笔记，后面如果忘记了也能很快回忆起来。

1. 小试牛刀

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .parent{
			height:500px;
			width:500px;
            background:salmon;
        }
    </style>
</head>

<body>
<div class="parent">
</div>
</body>
</html>

运行之后div的左侧和上侧都有一小截间距，在浏览器中元素默认离浏览器左侧和上面有8个像素的间距。
在.parent样式中添加

margin: -8px;

此时运行代码发现8个像素的间距消失了。注意在此处只能用margin，不能用padding，因为只有margin可以为负值，padding只能为正数值。

2. 实践

原始布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .parent{
			height:500px;
			width:500px;
            background:salmon;
        }
        .son1{
            width: 150px;
            height: 120px;
            background: rgb(48, 180, 180);
        }
        .son2{
            width: 150px;
            height: 120px;
            background: rgb(23, 212, 86);
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="son1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    <div class="son2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述

在parent样式中添加margin

.parent{
	height:500px;
	width:500px;
    background:salmon;
    margin: 30px;
}

运行后parent div和浏览器左侧和上侧距离变大
在这里插入图片描述

在parent样式中添加padding
```
.parent{
	height:500px;
	width:500px;
    background:salmon;
    padding: 30px;
}
```
运行后，parent div中的2个子div距离parent div左侧和上侧距离变大。并且parent div好像被拉伸了，变大了整整一圈，上下左右4个方向都变大了30px，也就是说此时的宽和高都是 500 + 30 * 2 = 560

在son1样式中添加margin

.parent{
	height:500px;
	width:500px;
    background:salmon;
}
.son1{
   width: 150px;
   height: 120px;
   background: rgb(48, 180, 180);
   margin-top: 90px;
}

可能有人以为此时结果应该是son1距离parent上侧距离变大，实际上son1距离parent距离没变，倒是parent距离浏览器上侧距离变大了

在son1样式中添加padding

.parent{
    height:500px;
    width:500px;
    background:salmon;
}
.son1{
    width: 150px;
    height: 120px;
    background: rgb(48, 180, 180);
    padding: 120px;
}

此时文字距离son1上下左右的距离都变大，son1内部上下左右4个方向的距离都变大了120px
在这里插入图片描述

在son2样式中添加margin

.parent{
    height:500px;
    width:500px;
    background:salmon;
}
.son1{
    width: 150px;
    height: 120px;
    background: rgb(48, 180, 180);
}
.son2{
    width: 150px;
    height: 120px;
    background: rgb(23, 212, 86);
    margin: 120px;
}

此时son2距离浏览器左侧和son1的距离变大
在这里插入图片描述

在son2样式中添加padding

	.parent{
	    height:500px;
	    width:500px;
	    background:salmon;
	}
	.son1{
	    width: 150px;
	    height: 120px;
	    background: rgb(48, 180, 180);
	}
	.son2{
	    width: 150px;
	    height: 120px;
	    background: rgb(23, 212, 86);
	    padding: 120px;
	}

在这里插入图片描述

最后的示例

.parent{
    height:500px;
    width:500px;
    background:salmon;
}
.son1{
    width: 150px;
    height: 120px;
    background: rgb(48, 180, 180);
    padding: 20px; /* 使得son1中的文字上下左右和son1有20px间距，son1被拉伸了 */
}
.son2{
    width: 150px;
    height: 120px;
    background: rgb(23, 212, 86);
    padding-top: 20px; /* 使得son2中的文字和son2顶端有20px间距，son2的height值变大 */
    margin-top: 20px; /* son2和son1有20px的间距 */
}

3. 其他区别

2个元素之间设置margin，取最大值

.son1{
    width: 150px;
    height: 120px;
    background: rgb(48, 180, 180);
    margin-bottom: 30px;
}
.son2{
    width: 150px;
    height: 120px;
    background: rgb(23, 212, 86);
    margin-top: 20px;
}

2个div分别应用son1和son2样式，它们之间的距离为30px

2个元素设置padding，间距为2个padding值之和

.son1{
    width: 150px;
    height: 120px;
    background: rgb(48, 180, 180);
    padding-bottom: 30px;
}
.son2{
    width: 150px;
    height: 120px;
    background: rgb(23, 212, 86);
    padding-top: 20px;
}

间距为50px

4. 初始化CSS（极其重要）

上面的这些例子运行结果好像和我们的固有认知并不一致，是因为CSS部分属性并未初始化，可尝试在页面<head></head>内添加以下代码，做一些初始化工作，之后再重新尝试上面的所有例子，你会有不一样的发现

<link href=“https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=“stylesheet”>

其实做初始化工作还有很多种方式，有兴趣可以去搜索一下。

参考：

http://www.hicss.net/use-margin-or-padding/
https://blog.csdn.net/qq_44885374/article/details/89371818

Nicholas___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的margin和padding

最近关于margin和padding有很多困惑，找了一些资料实践一下，做了一些笔记，后面如果忘记了也能很快回忆起来。1. 小试牛刀<!DOCTYPE html><html><head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style>
复制链接

扫一扫

专栏目录