css里margin是什么意思(正确理解CSS中的margin合并的用法)
类别:Web前端 浏览量:2125
时间:2022-03-30 00:33:58 css里margin是什么意思
正确理解CSS中的margin合并的用法前言
最近在学习很多开发过程中容易忽悠但是又很重要的知识点,很多时候用的少不代表它不重要,这里将它们写出来以记录,如果有写的不好的地方请指正。
概念
margin合并是指块级元素的上外边距与下外边距有时会合并为单个外边距,有两点需要理解。
- 在块级元素中,不包括浮动和绝对定位元素
- 只发生在和当前文档流方向的相垂直的方向上
场景
一、相邻兄弟元素margin合并
p { margin: 1em 0; } <p>第一行</p> <p>第二行</p>
因为第一行和第二行的元素合并在一起,所以他们的间距还是1rem,而并非上下相加。
二、父级和子元素
.li1 { margin-top: 10px; } .li2 { margin-top: 10px; } <li class="li1"> <li class="li2"></li> </li>
由于父级和子级元素的合并,所以顶部的margin为10px,而不是20px。
三、空级块元素的合并
li1 { overflow: hidden; } li2 { margin: 1rem 0; } <li class="li1"> <li class="li2"></li> </li>
这个<li>元素的margin-top和margin-bottom合并在一起,所以高度只有1rem。
解决方法
这里的解决方法我们分为三种情况来讨论,第一种就是解决兄弟元素之间的margin合并情况。
我们可以使用设置浮动元素来解决,例如:
p { margin: 1em 0; float: left; } <p>第一行</p> <p>第二行</p>
第二种是父级和子元素之间的margin合并,我们使用overflow属性来解决,例如:
.li1 { margin-top: 10px; overflow: hidden; } .li2 { margin-top: 10px; } <li class="li1"> <li class="li2"></li> </li>
当然,我们还可以通过设置父元素为块状格式化上下文元素、设置border、padding等方式来解决问题。
第三种情况就是空块级元素的合并,一般为空块级元素设置一个高度就能够避免margin合并的问题。
li1 { overflow: hidden; } li2 { margin: 1rem 0; height: 1rem; } <li class="li1"> <li class="li2"></li> </li>
意义
CSS中的margin合并是为了更好地进行图文信息展示而设计的,为了保证图文信息排版的舒服自然。我们不仅要理解它们存在的意义,而且要合理的运用它们。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- pandas数据分组使用方法(在Pandas中DataFrame数据合并,连接concat,merge,join的实例)
- 利用python合并pdf(Python合并同一个文件夹下所有PDF文件的方法)
- tortoisesvn 合并分支
- web.config自定义配置节点,将多个节点合并
- php中怎么分割数组(PHP实现数组根据某个字段进行水平合并,横向合并案例分析)
- margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)
- python excel 合并表格(Python实现合并excel表格的方法分析)
- 阿里云ecs服务器挂了怎么办(阿里云服务器ECS不支持合并多块数据盘怎么办?)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- python用指针合并两个有序数组(Python3实现计算两个数组的交集算法示例)
- python合并多个excel可以刷新吗(python 实现读取一个excel多个sheet表并合并的方法)
- sql两列合并成一列格式(SQL 将一列拆分成多列的三种方法)
- Python实现合并两个有序链表的方法示例(Python实现合并两个有序链表的方法示例)
- ASP.NET合并两个相关联的DataTable
- python如何判断两个数组相同(Python实现的合并两个有序数组算法示例)
- sql怎么查询字段合并(SQL函数将某个字段合并在一起的操作)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
热门推荐
- python协程使用教程(对Python协程之异步同步的区别详解)
- win10安装mysql8.0如何启动(win10下mysql 8.0.23 安装配置方法图文教程)
- mysql索引应该注意的地方(关于MySQL索引知识的小妙招)
- python正式参数(详解Python的三种可变参数)
- python爬取百度搜索pdf文档(Python实现的爬取百度文库功能示例)
- css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)
- mysql字段和关键字(mySQL之关键字的执行优先级讲解)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- php依赖注入和控制反转的区别(php反射学习之依赖注入示例)
- 简述python2与python3的不同点(Python2与Python3的区别实例分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9