我眼中的margin和padding-创新互联

俗话说得好，一千个小怪兽里眼里就有一千个凹凸曼，一千个码农眼中的padding和maigin就有一千个。对于刚入行的‘菜农’鄙人来说对于padding和margin着两个元素来说也有一些小的见解，做一分享，欢迎探讨。
1.padding和margin的自我介绍。
     padding指的是自身边框到内边框的距离，简称内边距。
     margin值得是自身边框到外边框的距离，简称外边距。
     懂了吗？懂了吗？……什么？没懂！  
     没事，我也没懂。好了，文字说不清楚咋们上图!
![](https://s1.51cto.com/images/blog/201804/19/61575294cc219c00f98468b3f90c09bc.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
要确定什么是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和padding
我给红色和蓝色均设置了margin值，红色下边距20px,蓝色上边距50px。我们可以看到。他们的间距只有50px。并不是70px。所以说大的一般会覆盖小的，并非叠加。
（2）取值
在不同的浏览器中，他们两个的取值也不相同，所以我们在优化的时候就要考虑到浏览器的兼容性了。
取值如图：
我眼中的margin和padding
最后说一点，padding不可以取负值，但margin可以取负值。但考虑到优化，取负值的时候尽量小心。
今天就说到这里，欢迎大家指导！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：我眼中的margin和padding-创新互联
链接地址：https://www.cdcxhl.com/article26/ceiijg.html

成都网站建设公司_创新互联，为您提供软件开发、App设计、Google、网站设计公司、全网营销推广、网站导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容