我眼中的margin和padding
标签：
JavaScript
俗话说得好，一千个小怪兽里眼里就有一千个凹凸曼，一千个码农眼中的padding和maigin就有一千个。对于刚入行的‘菜农’鄙人来说对于padding和margin着两个元素来说也有一些小的见解，做一分享，欢迎探讨。1.padding和margin的自我介绍。 padding指的是自身边框到内边框的距离，简称内边距。 margin值得是自身边框到外边框的距离，简称外边距。 懂了吗？懂了吗？……什么？没懂！ 没事，我也没懂。好了，文字说不清楚咋们上图!要确定什么是margin，什么是padding，我们首先要找的不是margin，也不是padding，而是border（边框）。没错，就是它，如图外边的蓝色边框（注意：在实例中边框一般情况呈线状，不可能有这么粗的边框。）。找到之后怎么办？不怎么办，想象，想象你就是那个边框……我是边框，我是边框。好了，接下来我们寻找margin和padding。margin。找到边框，将边框里边的内容挡住，从边框往外找，找离它最近的边框，它们之间的距离就是margin。同理，padding。找到边框，挡住外边所有的东西，内容的最外层与边框的距离就是padding。清楚了吗？还不清楚！好，那我们这样想。我们把border比作一个房子，对，它现在是一个房子。既然是房子那肯定有围墙吧，对，围墙把房子围了起来。再假设你在里边睡大觉，想象这个画面！这时，padding就是睡大觉的你（内容）到房子的墙壁（border/边框）的距离，margin就是房子的墙壁（border/边框）到围墙的距离。懂了吧？再不懂打死你！2.书写格式。 padding和margin都可以利用上下左右来调整盒子的大小。其书写格式也分多种。 （1）按个数分 padding（margin）：5px; （从左往右数） 它5px代表边框的内边距或外边距上下左右均为5个像素单位。 padding（margin）：5px 5px; （从左往右数） 第一个5px代表边框的内边距或外边距上下为5个像素单位。 第二个5px代表边框的内边距或外边距左右为5个像素单位。 padding（margin）：5px 5px 5px; （从左往右数） 第一个5px代表边框的内边距或外边距上为5个像素单位。 第二个5px代表边框的内边距或外边距左右为5个像素单位。 第三个5px代表边框的内边距或外边距下为5个像素单位。 padding（margin）：5px 5px 5px 5px; （从左往右数） 第一个5px代表边框的内边距或外边距上为5个像素单位。 第二个5px代表边框的内边距或外边距右为5个像素单位。 第三个5px代表边框的内边距或外边距下为5个像素单位。 第四个5px代表边框的内边距或外边距左为5个像素单位。 （2）按方向分 padding（margin）-left（right/top/bottum）：5px ; 它值得是内边距或外边距的左边距或右边距或上边距或下边距距离为5个单位像素。 3.注意事项 （1）重叠 当我们同时给相邻的两个个元素设置边距，一般距离大的会覆盖距离小的，并不是叠加。 举例如下： <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style >
#red{
width: 100px;
height: 100px;
background-color: red;
margin-bottom:20px ;
}
#blue{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}
</style >
<body>
<div id="red"></div>
<div id="blue"></div>
</body>
</html>
效果图如下：
我给红色和蓝色均设置了margin值，红色下边距20px,蓝色上边距50px。我们可以看到。他们的间距只有50px。并不是70px。所以说大的一般会覆盖小的，并非叠加。
（2）取值
在不同的浏览器中，他们两个的取值也不相同，所以我们在优化的时候就要考虑到浏览器的兼容性了。
取值如图：
最后说一点，padding不可以取负值，但margin可以取负值。但考虑到优化，取负值的时候尽量小心。
今天就说到这里，欢迎大家指导！
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦