【css基础】垂直外边距的合并
2023-09-14 09:10:21 时间
近期在重温《CSS权威指南》,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结。
1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距
请看以下一个小样例,效果图例如以下:红色的块margin-bottom为30px; 黄色的块的margin-top: 20px;最后的垂直的边距是为30px;
2. 当两个块级元素的外边距都小于0时,取绝值最大的那个作为两者之间的垂直边距。
请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-10px; 黄色的块的margin-top: -30px;最后两者的垂直边距是为-30px;注意:这个时候两个块会发生重叠,由于浏览器总会按从前到后的顺序显示元素,所以后出现的会覆盖较早出现的元素。
3. 当两个块级元素的外边距是一正一负时,用正的值减云负值的绝对值。
请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-20px; 黄色的块的margin-top: 30px;最后两者的垂直边距是为:30 - |-20| = 10px;
相关文章
- 【NLP基础】英文关键词抽取RAKE算法
- Linux—系统基础二
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 在html中加入外部css样式,如何引入CSS样式表?
- 【前端就业课 第二阶段】CSS 零基础到实战(04)定位
- CSS笔记(23) 基础班完结!撒花ヽ(°▽°)ノ
- 一点点css的基础原理总结
- 现在零基础转行软件测试还OK吗?
- JSP开发基础入门学习1
- UiAutomator Android 的自动测试框架(基础)「建议收藏」
- CSS 基础 之 基础选择器+字体文本相关样式
- CSS基础学习(1)
- CSS基础学习(2)
- CSS基础学习(3)
- CSS基础:z-index详解
- CSS基础 – position详解编程语言
- Linux基础操作指南(linux基本操作题)
- 逆向基础 OS-specific (二)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 建立基础Redis思维导图,掌握数据存储技能(基础的Redis思维导图)
- Java语法基础之for语句练习