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合并是为了更好地进行图文信息展示而设计的,为了保证图文信息排版的舒服自然。我们不仅要理解它们存在的意义,而且要合理的运用它们。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 利用python合并pdf(Python合并同一个文件夹下所有PDF文件的方法)
- margin属性设置4个参数(解决margin塌陷与margin合并margin清除浮动问题)
- sql如何合并多个表中的数据(SQL 列不同的表查询结果合并操作)
- vuetable表格合并(vue-table实现添加和删除)
- tortoisesvn 合并分支
- JavaScript中使用concat合并数组
- python opencv图像合并(Python3+OpenCV2实现图像的几何变换平移、镜像、缩放、旋转、仿射)
- python3.8爬虫需要的包(python爬取基于m3u8协议的ts文件并合并)
- css里margin是什么意思(正确理解CSS中的margin合并的用法)
- python批量创建字典(Python编写合并字典并实现敏感目录的小脚本)
- mysql拆分成多行(mysql单字段多值分割和合并的处理方法)
- dataframe模糊匹配合并数据(对DataFrame数据中的重复行,利用groupby累加合并的方法详解)
- python如何判断两个数组相同(Python实现的合并两个有序数组算法示例)
- ASP.NET合并两个相关联的DataTable
- python excel 合并表格(Python实现合并excel表格的方法分析)
- php中怎么分割数组(PHP实现数组根据某个字段进行水平合并,横向合并案例分析)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
热门推荐
- python大数据学习顺序(Python如何处理大数据?3个技巧效率提升攻略推荐)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- 自建docker镜像仓库(使用docker制作分布式lnmp 镜像)
- mysql底层原理是什么(MySQL 页完全指南—浅入深出页的原理)
- 阿里云申请ssl证书要好久(阿里云部署SSL证书详解)
- python实现的数据结构(Python嵌套式数据结构实例浅析)
- virtualbox 创建步骤(virtualbox上安装OpenSuse的方法)
- docker node 分阶段构建(Docker安装、创建镜像、加载并运行NodeJS程序的详细过程)
- deepin的简单安装与全盘安装(Deepin下安装神器Pyenv的步骤记录)
- jquery属性选择器
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9