步骤带图详细解释margin、padding、border、content

于 2020-01-01 20:16:07 发布
阅读量1.6k 收藏 5
点赞数 2
分类专栏： CSS html+css入门学习过程 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/103760937
版权

```````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
其他盒子模型相关博文传送门：
①CSS盒子模型总结
②一天搞定CSS：盒模型content、padding、border、margin–06
③CSS中的margin、border、padding区别

padding和margin的区别
padding：填充，在父级元素盒子内，通过增加父级元素的padding，减少父级元素的宽高，来移动子级元素盒子的位置。
【如果想要子级盒子在父级盒子里面完全居中，单纯使用padding来实现效果的话，则此时父级的width和height与子级的数值相等，而padding（左+右）=实际父级盒子的宽-子级盒子实际的宽。（高也一样）】
margin：这个属性得注意 “外边距塌陷现象”（①外边距合并现象；②上下塌陷现象）。

👉👉👉margin到底相对谁？

👉👉👉“margin塌陷” 嵌套盒子外边距合并现象

👉👉👉上下外边距塌陷的几种情况

👉👉👉外边距塌陷问题

👉👉👉为什么margin-top不是作用于父元素

这里是一个简单的盒子模型示意图：（为方便参考，本篇内容所有练习的配色以下图为主）

【红色部分是content、青蓝色是padding、灰色是margin（border边则没设置，padding和margin相交处即为边）】

在这里插入图片描述

先看看只有padding和content部分的示意图：

padding的各个值所代表的意思：

在这里插入图片描述

padding干嘛的？

——在当前元素内进行填充，相对的，内容部分要减去对等的“面积”，否则就会超出规定面积大小，成为原面积+填充面积。所以，padding会影响到当元素的宽高。
padding宽高增了多少（上+下=长，左+右=宽），相对的，盒子的宽高就要减去多少。

公式：
（所谓定义的值，是希望达到的最终的盒子的值，就切图来说，这个值就是你切的这个区域的宽和高）
定义的宽值 =(padding-left + padding-rightl) + content的weight;
定义的高值 =(padding-top + padding-bottom) + content的height;

下面是测试盒子的代码的步骤：

  1. 第一步：首先定义三个元素，当作测试盒子，父级（div）>子级（p）>孙级（span） 的嵌入
    在这里插入图片描述
  2. 第二步：为三个元素设置不同背景色，方便观察
    在这里插入图片描述
  3. 上述步骤因为没有增加内容，所以无法看到效果，所以给 孙级 元素随便填一些内容，此时即可观察三个盒子的状态：
    ①因为没有设置宽高，所以父级和子级整行都是背景色，两级背景重叠（div和p都是块级元素，都是占一行的，此处p是被div包裹，所以，div的宽高值等于p的宽高值，此时显示的则是子级内容，父级div被覆盖了）
    ②<span>是行内元素，不会占一行
    在这里插入图片描述
  4. 将行内元素<span>用display: block;块级化（此时独占一行）；
    在这里插入图片描述
  5. 现在就能给块级化的行内元素设置宽高了，这里设置小值，利于观察（宽给设小了，那么就会显示父级的宽了）：
    在这里插入图片描述
  6. 首先，把中间盒子的宽高，设置成最里面盒子——内容content的宽高等值，先把最外层的盒子，div元素给露出来：
    在这里插入图片描述
  7. 为了利于观察，把大盒子的宽高设置大一点（面积大点）【都设为正方形是为了方便】：
    在这里插入图片描述
  8. 到这里，才开始把中间的盒子的宽和高的值修改大一点，大于内盒子（content）小于大盒子：
    （在开发中，这里相当于psd切图所给的值，后续会上传关于psd切图练习博文）
    在这里插入图片描述
  9. 加入padding属性，随便给值：50px
    但是，我希望加入padding值后，所展现的每个部分的盒子的位置和大小原封不动，怎么办？
    首先观察：上面无论是内容部分还是中间盒子部分还是大盒子部分，都是贴紧上边和左边的top=right=0px；
    所以此处：padding-top:0px; padding-left; （我这里只介绍padding嘛，margin最后说）
    那么，在中间盒子的css属性应该为：padding: 0px 50px 50px 0px;
    然后，发现问题来了——“搞毛啊？怎么反而多出了一些部分？”
    别急，多出的部分，就是padding填充的部分，下个步骤会说明怎么处理，也是盒子模型-padding知识的重中之重。
    在这里插入图片描述
  10. padding的重中之重：padding增加了多少，该盒子的宽和高就要对应的减去多少，才能达到原先定的宽高值。
    为何会出现上图的多出部分的原因？
    因为你本来就300px（定义的值），然后又给padding填充了，所以又加上了padding的值，所以最终的值是：
    最终中间盒子的宽 = width + (padding-right + padding-left) = 300+(0+50)=350px;
    最终中间盒子的高 = height + (padding-top + padding-bottom) = 300+(0+50)=350px;
    所以，如果想要最后中间盒子的宽和高跟之前一样长，就必须减去padding这里多出的值：
    最终中间盒子在css的宽和高应该为：
    width = 300 - (padding-right + padding-left) = 300-(0+50)=250px;
    height = 300 - (padding-top + padding-bottom) = 300-(0+50)=250px;
    将值修改后，一看，多出的部分没了，此时就达到了原来的效果。
    在这里插入图片描述
    💦💦💦在设置了宽和高可以显示内容后，把文字删掉，因为字体有行高，会影响整体的数据💦💦💦

    关于盒子模型字体内容居中的传送门：盒子模型之字体和段落的行高问题

    可以按F12打开开发者调试工具来查看该内容的盒子数据：
    span里面的是内容content部分，因为是显示的内容，所以不需要padding，否则内容变形。也不需要margin，否则位置被撑走。
    在这里插入图片描述
    可以看到盒子p.box的宽高依然是300×300；布局显示的是(250+50)*(250+50)，就是该元素最后的宽高值：250px；加上填充padding-right和padding-bottom的值：
    【跟右边布局对应的颜色，很明显就能看到，蓝色区域是250px，绿色部分就是（padding填充部分）50px，margin因为没设置，所以上下margin为16】
    在这里插入图片描述
最后来个附加题，将内容盒子content放在中间盒子的中间：（这里是真正的算术题了）
首先捋一捋已知条件：
已经定义的宽和高的值：300px（假设这里是切图给的宽和高）;
内容content盒子的宽和高：100px;
∵此处盒子和内容都是正方形，所以填充padding的每个方向的值都相等，均为x。
∵定义的宽值=content的width + (padding-right + padding-left)；
∴定义的宽值=100+2x=300(px)；
∴x=100px；
又∵width=定义的宽值 - (padding-right + padding-left)=定义的高值 - (padding-top + padding-bottom)=height；
∴width = 300 - (padding-right + padding-left)=300-2x=300-200=100(px)=height;

这个看不看无所谓，关键在于会算，知道padding加多少，CSS中的width和height就要减相同的值就行了
代码（CSS部分）： 
    .box1{
        background-color: #e7e5e6;
        width: 500px;
        height: 500px;
    }

    .box2{
        background-color: #75f8f0;
        
		width: 100px;				/*这里是最终的值*/
        height: 100px;

        padding:100px;				/*这里就是填充部分，每个方向增加100px*/
    }

    .content{
        background-color: #ca0000;
        display: block;
        width: 100px;
        height: 100px;
    }

效果图：
在这里插入图片描述
F12查看布局构成：
可以看出，盒子的宽和高依然是300×300，没变过，但是内容居中了，padding的值是100px，中间部分是100×100px；
【通过右图对比颜色，可知道，该红色部分其实就是蓝色部分（红色颜色深，覆盖了蓝色，位置重合），content部分，100×100，绿色则是padding部分。】
在这里插入图片描述

margin部分：

（关于border我不想举例了，反正将每个方向border的粗细加进去算的，盒子的总宽和总长不变就行了，边或边距的大小增加多少，其相关元素标签的宽和高就要减去多少）
首先：为了确保数值正确，首先消除元素默认内外边距
👉👉👉html默认css样式的标签及去除(全局)
为了确保布局时数据的准确性，所以在码代码时，必须先把所有有默认内外边距的元素给消除边距： 在css语句中第一行输入 想要消除的元素{ padding:0px; margin:0px;}（此处不建议使用通用选择器*，容易把一些不必要去除的给去掉了。）
因为我这里只用了div+p+span标签，而拥有默认内外边距样式的只有 body和p。
所以： 直接写：body,p{ padding:0px; margin:0px;}

在这里插入图片描述
在这里插入图片描述

然后：利用margin和padding来调整红色内容盒子的位置
🔸假设：让红色内容盒子，在灰色大盒子内居中🔸

第一种方法（只需在原来的条件下，直接给红色盒子增加margin，不需要调其他属性）

因为我只需要将红色部分在灰色盒子中间显示，所以在原来红色盒子在蓝色盒子内居中的情况下，直接在红色盒子的CSS中加入margin：

  • Q：为何是margin:100px;呢？

  • A：首先撇开原先的位置，这里和padding一样，margin=(灰色盒子的宽-红色盒子的宽)/2=(500-100)/2=200px;但是，因为上面已经完成了红色盒子在蓝色盒子内居中，所以位置产生了变化，相当于已经在灰色盒子移动了宽：500-100和高500-100的距离，所以此时是剩下(500-100)-200=100px;不需要margin=200px;了

在这里插入图片描述
如下：
在这里插入图片描述
代码部分

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒模型测试</title> 
<style type="text/css">
body,p{
    padding:0px;
    margin:0px;
}

/*最外面的盒子：灰色*/
	.box1{
        background-color: #e7e5e6;
        width: 500px;
        height: 500px;
    }
/*中间的盒子：青蓝色*/
    .box2{
        background-color: #75f8f0;
        width: 100px;                   
        height: 100px;
        padding:100px;			/*此处padding: 100px;*/
    }
/*内容盒子部分：红色*/
    .content{
        background-color: #ca0000;
        display: block;
        width: 100px;
        height: 100px;
        margin:100px;			/*此处margin: 100px;*/
    }
</style>
</head> 

<body>
<!--div元素设置一个外盒box1（如果没有外盒，则默认body，即浏览器窗口）-->
<div class=box1>
    <!--p元素设置一个内盒box2-->
    <p class="box2">
        <!--span元素设置一个内容部分，为了方便观察，设置为背景色为红色的盒子content-->
        <!--注意行内元素块级化，box模型中常使用的属性，display-->
        <span class="content"></span>
    </p>
    
</div>

</body>
</html>

第二种方法（给蓝色盒子一个padding内边距填充，同时修改蓝色盒子的width和heigh配合居中）

红色内容区域的CSS依旧不改动，给中间的盒子设置padding。
由于之前已经设置了红盒子在蓝盒子里面居中，那么这里设置让蓝盒子在灰盒子上居中就行了。
计算方法：
∵正方形所以边都相等
∵设需要填充的padding-top=padding-bottom=x；
∴宽的部分需要填充的padding-top值是：
   x=(原来灰色盒子的宽（定义的值）- 蓝色盒子的宽)/2=(500-300)/2=100(px)；
∴最后该灰色盒子的width=height=原值 - (padding-top + padding-bottom)=500-(100+100)=300(px)；
在这里插入图片描述
代码部分

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒模型测试</title> 
<style type="text/css">
body,p{
    padding:0px;
    margin:0px;
}

/*最外面的盒子：灰色*/
    .box1{
        background-color: #e7e5e6;
        width: 300px;
        height: 300px;
        padding:100px;			/*此处padding: 100px;*/
    }
/*中间的盒子：青蓝色*/
    .box2{
        background-color: #75f8f0;
        width: 100px;                   
        height: 100px;
        padding:100px;			/*此处padding: 100px;*/
    }
/*内容盒子部分：红色*/
    .content{
        background-color: #ca0000;
        display: block;
        width: 100px;
        height: 100px;
    }
</style>
</head> 

<body>
<!--div元素设置一个外盒box1（如果没有外盒，则默认body，即浏览器窗口）-->
<div class=box1>
    <!--p元素设置一个内盒box2-->
    <p class="box2">
        <!--span元素设置一个内容部分，为了方便观察，设置为背景色为红色的盒子content-->
        <!--注意行内元素块级化，box模型中常使用的属性，display-->
        <span class="content"></span>
    </p>
    
</div>

</body>
</html>

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
👇👇👇延申的特殊方法：👇👇👇
（下面的方法均是外边距塌陷问题【灰色盒子走位了，会影响灰色盒子外的其他布局】，解决的方法就是在父级元素写上overflow: hidden;当然，你想保持蓝色盒子在灰色盒子内居中也可以）

👉关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）

💥不推荐第三种💥【因为灰色盒子的父级是bodu，给body添加overflow: hidden;也无法解决，至于为何，我以后找原因到或会补充】

第三种方法（padding居中红盒子后，在灰色盒子增加margin）

ps：跟第一种方法一样，只是作用的元素标签不一样而已在这里插入图片描述
第四种方法（回到最初没有设置任何padding的条件，直接给红色内容盒子设置margin）

【没在其他元素设置padding或margin，只在内容元素设置margin】
在这里插入图片描述
（关于灰色盒子塌陷的解决办法：给红色盒子的父级——蓝色盒子加上overflow: hidden;即可）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒模型测试</title> 
<style type="text/css">
body,p{
    padding:0px;
    margin:0px;
}

/*最外面的盒子：灰色*/
    .box1{
        background-color: #e7e5e6;
        width: 500px;
        height: 500px;      
    }

/*中间的盒子：青蓝色*/
    .box2{
        background-color: #75f8f0;
        width: 300px;                   
        height: 300px;
        overflow:hidden;			/*overflow:hidden  解决外边距塌陷*/
    }

/*内容盒子部分：红色*/
    .content{
        background-color: #ca0000;
        display: block;
        width: 100px;
        height: 100px;
        margin: 200px;				/*给红色盒子设置外边距*/
    }
</style>
</head> 

<body>
<!--div元素设置一个外盒box1（如果没有外盒，则默认body，即浏览器窗口）-->
<div class=box1>
    <!--p元素设置一个内盒box2-->
    <p class="box2">
        <!--span元素设置一个内容部分，为了方便观察，设置为背景色为红色的盒子content-->
        <!--注意行内元素块级化，box模型中常使用的属性，display-->
        <span class="content"></span>
    </p>
    
</div>

</body>
</html>

第五种方法（回到最初没有设置任何padding的条件，直接给蓝色中盒子设置margin）

【没在其他元素设置padding或margin，只在中盒子元素设置margin】
在这里插入图片描述
（关于灰色盒子塌陷的解决办法：给中盒子的父级——灰色盒子加上overflow: hidden;即可）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>盒模型测试</title> 
<style type="text/css">
body,p{
    padding:0px;
    margin:0px;
}

/*最外面的盒子：灰色*/
    .box1{
        background-color: #e7e5e6;
        width: 500px;
        height: 500px;
        overflow:hidden;			/*overflow:hidden  解决外边距塌陷*/
    }

/*中间的盒子：青蓝色*/
    .box2{
        background-color: #75f8f0;
        width: 300px;                   
        height: 300px;
        margin: 200px;				/*给中盒子设置外边距*/
    }

/*内容盒子部分：红色*/
    .content{
        background-color: #ca0000;
        display: block;
        width: 100px;
        height: 100px;
    }
</style>
</head> 

<body>
<!--div元素设置一个外盒box1（如果没有外盒，则默认body，即浏览器窗口）-->
<div class=box1>
    <!--p元素设置一个内盒box2-->
    <p class="box2">
        <!--span元素设置一个内容部分，为了方便观察，设置为背景色为红色的盒子content-->
        <!--注意行内元素块级化，box模型中常使用的属性，display-->
        <span class="content"></span>
    </p>
    
</div>

</body>
</html>

💥第六种也不推荐，原因跟第三种一样💥
第六种方法（回到最初没有设置任何padding的条件，直接给灰色大盒子设置margin）

【没在其他元素设置padding或margin，只在大盒子元素设置margin】
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值