盒子模型之外边距

何为外边距:
外边距指的是盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响盒子的位置

外边距(margin)

四个外边距:

margin-top : 上外边距
margin-right : 右外边距
margin-bottom : 下外边距
margin-left : 左外边距

外边距的设置语法:
margin-xxx:值
在这里插入图片描述
注意:
这个外边距设置的值可以理解为最小值,即最小的外边距,因为页面中的元素都是靠左上放置的,有的时候当设置了右边和底部的外边距的值,但是盒子距离右边框和底边框还是很远。
在这里插入图片描述
但当设置了右或下外边距的时候会改变其他盒子的位置
在这里插入图片描述


内边距的值也可设置为一个负值
设置为负值的时候盒子移动方向会跟原来的方向相反,可以使盒子陷入到整个页面外面
比如:
在这里插入图片描述
下面的绿色的盒子因为上面盒子下边距的设置他也重叠在了上面黄色盒子的身上
注意:
此时这样的块元素还是都独占一行

auto(设置外边距的最大值)

margin还可设置为auto,auto一般只设置给水平方向的margin
如果指定,左外边距或右外边距的margin为auto,则将会自动将左外边距或者右外边距设置为最大值,最大值有多大就设置为多大
语法:
margin-xxx:auto
在这里插入图片描述
而且,不管页面大小怎么变化,这个盒子一定是靠最右边的
垂直方向外边距设置为auto,则默认外边距设置为0,而且如果之前设置过垂直方向的外边距也会被覆盖
在这里插入图片描述
原来设置的顶部外边距被覆盖了变成了0

设置左右外边距相等且不随页面大小而变不等

当左右外边距都设置为auto则会将两侧的外边距设置为相同的值
可使子元素在父元素中水平居中
在这里插入图片描述
水平居中

同时设置四个方向的外边界

外边距同样可以使用简写属性margin,可以同时设置四个方向的外边距
语法:
margin: 值1 值2 值3 值4
如果指定三个值,则这三个值会分别设置给 上,左右,下
两个值则为 上下,左右

所以可以这么设置盒子居中margin:0 auto


垂直外边距的重叠

在网页中垂直方向的相邻外边距会发生外边距的重叠

何为外边距的重叠:
即指兄弟元素之间的相邻外边距会取最大值,而不是取和。

注意,这里外边距重叠有两个条件:
1.垂直方向
2.相邻

而且相邻的外边距不一定一个是下外边距一个是下外边距,还可以都是上外边距或者都是下外边距
如下:
在这里插入图片描述
仅仅只设置了子元素div2的上外边距,但是,外父元素div1的上外边距也受到了影响,说明两个外边距重叠,取最大的外边距
==可以在
这里的父子元素都是相邻的,而且设置的也是垂直方向的,当我们使其不相邻,比如在两个元素之间加入一些元素,就会使他们不重叠。
如下:
在这里插入图片描述
我们还可以给父元素或者子元素设置一个边框,或者内边距这样的话也会使两个元素不相邻,也会使外边距不重叠

当然,我们可以通过设置父元素的内边距来达到给子元素设置外边距的效果

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值