逆战班学生教你认识外边距margin和内边距padding的特点

1、盒子详解

内容区]内边距区(padding)]边框(border)]外边距区(margin),如下图:
在这里插入图片描述

2、内边距padding

padding:控制子元素在父元素里面的位置关系[调整值是加在父元素上的]

padding特点:
<1>padding的值可以将盒子撑大。
解决方案:将盒子的长宽在原有基础上减去padding的值

<2>可以给单一方向设置padding值:padding-left/right/top/bottom:数值px;

<3>pandding后数值只有一个时:表示上下左右间距都为该数值
pandding后数值有2个时:前面数值表示上下间距,后面数值表示左右间距
pandding后数值有3个时:前一个数值表示上面的间距,中间数值表示左右数值,最后一个数值表示下面的间距
pandding后数值有4个时:从左到右依次为上面的间距、右边的间距、下面的间距、左边的间距

<4>padding不能被设置为负数!!

<5>padding不会对背景图产生影响,因为背景图是不占空间的

<6>当元素的盒子未定义宽高时,padding将盒子撑开,此时不需要在原有基础上减去padding的值

3、外边距margin

margin:控制同级元素之间的位置关系[调整值是加在子元素上的]

margin特点:
<1>margin的值不会对盒子本身的宽高产生影响。

<2>可以给单一方向设置margin值:margin-left/right/top/bottom:数值px;

<3> margin后数值只有一个时:表示上下左右外间距都为该数值
margin后数值有2个时:前面数值表示上下外间距,后面数值表示左右外间距
margin后数值有3个时:前一个数值表示上面的外间距,中间数值表示左右的外间距,最后一个数值表示下面的外间距
margin后数值有4个时:从左到右依次为上面的外间距、右边的外间距、下面的外间距、左边的外间距

<4>margin可以被设置为负数!!

<5>当给margin设置:
margin:0 auto;
可以让当前元素在父元素中水平居中。

margin常见bug:
<1>父元素和子元素都没有浮动时,当第一个子元素设置margin-top值时,默认会将父元素一起设置margin-top值

<2>上下相邻的两个元素之间的margin值,不会叠加,结果是按照最大值去设置

发布了7 篇原创文章 · 获赞 0 · 访问量 123
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览