外边距合并及解决方法
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
解决方案: 避免就好了。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
设置子元素的外边距时,会应用到父边距上去 垂直方向才会发生合并现象
解决方案:
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden(常用)
padding和margin不同
他们两个最大的不同是作用对象的不同
padding作用的是自身
margin作用的是外部元素
外边距合并及解决方法相关推荐
- CSS外边距合并问题以及方法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝 ...
- 最全的css中解决外边距合并问题
外边距合并 首先,我们先来看一下什么是外边距合并. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们 ...
- 前端:CSS/13/HTML引入CSS的方法,CSS表格属性,盒子模型,上下外边距合并
HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
- margin外边距合并问题以及解决方式
margin外边距合并问题以及解决方式汇总 简介 块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing). 外 ...
- html设置外边距不合并,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法 ...
- (盒子模型常见问题)外边距合并问题,嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
- css外边距自动代码,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法 ...
- 外边距塌陷/外边距合并
外边距合并 外边距合并一般发生在兄弟元素之间.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于:若两个外边距为两正,取较大者,若两个外边距一正一负,取 ...
- 【温故知新】CSS学习笔记(外边距合并)
CSS外边距合并 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
最新文章
- MyBatis基础入门《九》ResultMap自动匹配
- Deep Learning-论文翻译以及笔记
- java string 数据结构_数据结构---Java---String、StringBuilder、StringBuffer
- Java PropertyPermission equals()方法与示例
- python del函数_python中del函数的垃圾回收
- java条码大小_java - ML Kit条形码扫描:无效的图像数据大小
- 大数据之-Hadoop3.x_Yarn_常用命令---大数据之hadoop3.x工作笔记0147
- 华为云发布五大新品,这个成功实践也首次对外公开
- CentOS 7 - 创建新用户
- HALCON 21.11:深度学习笔记---分类(10)
- Flask开发服务器
- 5. Longest Palindromic Substring
- win10的系统mysql服务器地址,win10的系统mysql服务器地址
- python经典小程序-你用python写过那些好玩的微信小程序?
- mysql中复制表结构的方法(亲测通过)
- 计算机技术英文文章作者及篇名,英语论文注释及参考文献格式
- dlink路由器设置虚拟服务器,dlink路由器简单的上网步骤和密码修改
- MySQL 常见时间获取整理(当日、当月、当年、上一日、上一月、上一年,当月第一天,当年第一天等等)
- 什么是JMS(消息服务)
- python什么意思v_稍微介绍下python库之VPython
热门文章
- 14、文件指令集与变量
- 怎么找网图本人_怎么通过照片找人-请问如何用相片在网络查找个人资料就是利用相 – 手机爱问...
- mysql里hdr是什么的缩写_4kHDR是什么意思(4K HDR到底是什么鬼?)
- 字符和文档识别的四十年研究
- 001_Whetting Your Appetite_引言
- python开发中级_针对中级Python开发人员的13个项目构想
- 数据表中常见的数据类型
- 巴比特 | 元宇宙每日必读:连续七个季度出现亏损,Meta元宇宙部门Q2亏损28 亿美元,扎克伯格称这种情况可能会持续数年...
- Unity使用protobuf-net实现的网络框架
- 加速度随机游走_VIO学习之公式推导——IMU篇