网页制作之css盒模型外边距合并

  • 时间:2018-11-13 23:29 作者: 来源: 阅读:989
  • 扫一扫,手机访问
摘要:一、外边距合并/Margin(空白边)叠加 概念: 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。二、外边距合并常见的情况 1) 当一个元素出现在另一个元素上面时,第一个元素的底空白边与第二个元素的顶空白边发生叠加。

一、外边距合并/Margin(空白边)叠加 概念:

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

二、外边距合并常见的情况

1) 当一个元素出现在另一个元素上面时,第一个元素的底空白边与第二个元素的顶空白边发生叠加。

网页制作之css盒模型外边距合并

两个元素同时设置了margin,上边元素设置margin-bottom:20px;下边元素设置margin-top:20px;最后的margin值依然为20px,假如一个是30px.一个是20px,则最后以大的为准。

2) 当一个元素包含在另一个元素中时(假设没有填充或者边框将空白边分隔开),它们的顶和/或者底空白边也发生叠加。

网页制作之css盒模型外边距合并

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或者绝对定位之间的外边距不会合并。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部