__x__(22)0907第四天__ 垂直外边距重叠

外边距重叠,

也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者。。。在布局时,易造成混淆。



1. 上下元素 垂直外边距重叠

垂直相邻的两个div,上面的div设置了margin-bootom,遇到下面div设置的margin-top,会发生重叠,产生一个较大的外边距



2. 父子元素 垂直外边距重合

父子元素div时,为子元素div设置上边距时,两个div都会发生向下偏移,此时父子元素的外边距重叠。

当一个元素包含在另一个元素中时(假设没有内边距padding或边框border把外边距分隔开),它们的上和/或下外边距也会发生合并。



3. 空元素自身 垂直外边距重叠

假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生重叠。



 解决方法:

  • 为父元素加一个padding或者border。。。缺点:改变了可见框的大小,需要减去适应。。。这里增加了,需要在那里减小。

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9606586.html

时间: 2024-11-05 15:47:39

__x__(22)0907第四天__ 垂直外边距重叠的相关文章

margin属性以及垂直外边距重叠问题

   盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置. margin属性可以用来指定盒子外边框的大小,有两种方法设置外边距:第一种单独属性分别设置四个方向的外边距,第二种是使用简写属性同时设置多个方向的外边距(注意顺序),margin 属性接受任何长度单位,可以是像素px.英寸in.毫米mm或 em 一.单独属性设置各个方向外边距 盒子有四个方向的外

__x__(20)0907第四天__ css 框模型

CSS处理元素,把每个元素都包含在一个盒子里. 对网页的布局,其实就是对盒子的摆放及设置.  边框border,会使盒子变大: .box{ border: 10px 20px 30px 40px red solid; } .box{ border-width: 10px 20px 30px 40px; border-color: red; border-style: solid; } border-top-xxx: border-right-xxx: border-bottom-xxx: bor

css 垂直外边距重叠

元素的上外边距和其属于常规流中的第一个孩子的上外边距. 元素的下外边距和其属于常规流中的下一个兄弟的上外边距. 属于常规流中的最后一个孩子的下外边距和其父亲的下外边距,如果其父亲的高度计算值为auto. 元素的上.下外边距,如果该元素没有建立新的块级格式上下文,且 min-height 的计算值为零.height 的计算值为零或 auto.且没有属于常规流中的孩子.

BFC与垂直外边距合并问题

一.什么情况下发生外边距的合并 1)必须处于普通文档流中(不能脱离文档流),并且处于同一个BFC中 2)相邻的外边距,不能有间隙和边框 3)垂直方向上 二.如何合并 1)兄弟元素之间,外边距合并会去最大的那个外边距而不是取和 2)父子元素之间,外边距合并会将子元素的外边距设置给父元素 3)空元素 三.如何解决垂直外边距重叠问题? 1)父元素添加透明上边框或者内边距 2)父元素前面块元素隔开 3)开启BFC, *设置 display:table/table-cell/table-captions/

css盒子模型、垂直外边距合并

css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容区域的宽度后,再设置盒子的填充.边框.边距值,盒子在页面中实际占据的页面尺寸的计算是: 水平方向上::width+2*padding+2*border+2*border, 垂直方向上::height+2*padding+2*border+2*border, 不过需要注意的是行内元素,在不改变它的表现

【css基础】垂直外边距的合并

这个题目参考大神,链接如下: http://www.cnblogs.com/kuangbin/archive/2012/08/30/2664419.html 还有种类并查集的详细解答,链接如下: http://www.cnblogs.com/wuyiqi/archive/2011/08/24/come__in.html 题目链接 题目如下: Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/327

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的

Margin的垂直外边距问题

昨天做练习的时候遇到了margin外边距的问题,给body的子元素div设置了margin-top:50px:为什么div元素没有把body撑开(即div顶部距body拉开50px)???而是div连同body整个被拉下来了,body距离<html>为50px??? 代码结构如下: html{ width: 100%; height: 100%; background: red; } body{ margin: 0; padding: 0; width: 100%; height: 100%;

解决垂直外边距合并的几种办法

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 在父级容器有上下外边距的情况下,子元素如果添加外边距,父元素和子元素的垂直方向上的外边距会合并,相邻元素也会合并.在用margin给子元素和父元素之间留空白的时候通常会发生这样的问题. 几种解决办法: 1:父容器:border:1px solid;(不能是0px) 2:父容器:overflow: hidden;(或auto) 3:父容器:padding:1px:(不能是0