黑马程序员技术交流社区
标题: 关于padding和Margin的用法 [打印本页]
作者: 769305947 时间: 2019-7-25 12:35
标题: 关于padding和Margin的用法
一、盒子的实际大小：内容的宽和和高度+内边距+边框；
二、关于padding内边距 和Margin外边距的设置）
（1）padding内边距
Padding不同方向设置：
padding:30px; 四个方向的内边距都是一个值；
padding-left:40px; 设置左边的内边距；
padding-right:40px; 设置右边的内边距
padding-top:40px; 设置距离顶部的内边距
padding-bottom:40px; 设置距离底部的内边距
取值的个数不同表示意思不同：
padding：30px； 表示四个方向的取值都一样；
padding：30px 60px； 表示：上下 左右 取值；
padding：30px 50px 60px； 表示：上 左右 下 取值；
padding：30px 40px 50px 60px ； 表示：上 右 下 左 取值；
问题：01、如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；
解决方案：加多少减去多少，再减的是还要注意是减去宽度环视高度；
02、如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大；
（2）margin 外边距
margin不同方向设置：
margin:30px; 四个方向的外边距都是一个值；
margin-left:40px; 设置左边的外边距；
margin-right:40px; 设置右边的外边距
margin-top:40px; 设置距离顶部的外边距
margin-bottom:40px; 设置距离底部的外边距
取值的个数不同表示意思不同：
margin：30px； 表示四个方向的取值都一样；
margin：30px 60px； 表示：上下 左右 取值；
margin：30px 50px 60px； 表示：上 左右 下 取值；
margin：30px 40px 50px 60px ； 表示：上 右 下 左 取值；
2、块级盒子水平居中（天天用）
让盒子居中的条件：
01 盒子的显示模式必须为块级元素
02 盒子必须要有固定的宽度
03 利用margin：上下 auto；/ margin：auto；
注意：上下的值可以自定义设置，如果没有设置为 margin:0 auto;
3、文本居中属性text-align: center;和margin:auto;的区别
text-align: center; 是让父级盒子里面的文本、行内元素（span/a/em）、行内块元素(img/input)水平居中显示;
margin:auto; 只让块元素水平居中显示;
三、常见问题
（1）行内元素设置外边距margin和padding的问题给行内元素设置margin-top、margin-bottom、padding-top、padding-bottom是不会显示效果的；如果想要让他们生效怎么处理？
解决方案：01、不要添加；
02、将行内元素的显示模式用display: block;转换给块元素或者用display: inline-block;转换行内块元素；
（2）垂直排列的盒子外边距合并问题：两个盒子如果垂直排列，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；
解决方案：不要同时设置，只给一个盒子设置即可；
（3）嵌套垂直外边距合并问题：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
1、为父级设置上边框（不用，因为添加了border父级的高度会增大）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；
3、直接给父级添加overflow:hidden;（常用方法）
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |