css3两个盒子垂直外边距合并

2024-11-01

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

近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距请看以下一个小样例,效果图例如以下:红色的块margin-bottom为30px; 黄色的块的margin-top: 20px;最后的垂直的边距是为30px; 2. 当两个块级元素的外边距都小于0时,取绝值最大的那个作为两者之间的垂直边距. 请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-10px

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

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

CSS 垂直外边距合并：规范、延伸、原理、解决办法

<CSS 权威指南>第七章基本视觉格式化.p192,提到了垂直外边距合并的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详解,总结如下: 规范: 8.3.1 Collapsing margins 计算方法: 如果外边距都是正数,取大的: 如果一个正数,一个负数,正外边距-负外边距的绝对值,相当于正外边距+负外边距: 都为负数,取外边距绝对值较大的: 如果相邻外边距有多个,要一起参与计算,不能分布计算:要注意,相邻的元素不一定非要

CSS min-height不能解决垂直外边距合并问题

垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了. 当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了:当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现:而当父元素设定了min-height,并且

文本溢出、垂直外边距合并、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:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div和父元素body一样高,并且距离<html>上边距50px,如下图(a): <!doctype html> <html> <head> <title></title> <meta charset="utf-8"&

BFC 以及外边距合并问题

BFC定义: BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. BFC布局规则特性: 在BFC中 , 盒子从顶端开始垂直的一个接一个排列盒子垂直方向的距离有margin决定,属于同一个BFC的两个相邻的盒子发生重叠在BFC中,每个盒子的左外边距(margin-left)会触碰到容器的左边缘(bor

“margin塌陷” 嵌套盒子外边距合并现象

来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间若两者都为正外边距以最大的外边距为准: 若存在负边距, 合并后的外边距为最大正外边距减去绝对值最大的负边距: 若无正外边距,则用0减去绝对值最大负边距. 2.父元素与第一个/最后一个子元素之间如果块级元素的 margin-top/margin-bottom 与它的第一个/最后一个子元素的margin-t

关于CSS inline-block、BFC以及外边距合并的几个小问题

CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例定义:当两个垂直外边距相遇时,将形成一个外边距. 合并的场景: 一个元素出现在另一个元素上面时: 示例: 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开) 如图效果中,父容器box和子元素box1的上外边距合并,与子元素

css外边距合并和z-index的问题

参考这篇文章, 将外边距的折叠参考这篇文章, 将bfc的生成, bfc的应用参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, 但没有外边距margin属性? 这个说法是错误的! 实际操作表明, 所有的style样式属性都是具有的! 该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴.如果为正数,则离用户更近,为负数则表示离用户更远. z-index 与 position属性的关系? 关于stacki

由外边距合并到BFC

置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话) ::selection{ background:blue; color:red; } span{ color:red; } 外边距合并 myvin今天主要说的是BFC,块级格式化上下文,这里先由外边距合并引出来. 对于外边距合并,应该都不陌生,在这里简单列出外边距合并的几种情况: 两个元素

CSS2系列：外边距合并问题(margincollapse)

外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 为了好认识,我们称内部div为"盒子",包含这个内部div的外部div为"包含体" 解释怎么相遇: 相邻的两个盒子(可能是兄弟关系也可能是包含关系)这两个元素margin之间不能夹杂着边框啊,补白啊什么的就

内层div的margin-top影响外层div——引出外边距合并Collapsing margins

内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. <style type="text/css">body { margin:0; padding:0;}div { margin:0; padding:0;}.a { width:500px; margin:0px auto 30px; background:#eee;}.d1

css - 盒子内外边距

css - 盒子内外边距元素内边距内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{ width:200px; height:200px; background:black; padding:10px; /*上下左右都是10px*/ padding:10px 20px; /*上下10px 左右20px*/ padding:10px 20px 10px; /*上10px

CSS外边距合并的几种情况

CSS外边距合并的几种情况外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical ma

css的外边距合并或者外边距塌陷问题

第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40px时,现象如下图所示: 结论: 只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题,此问题也不需要解决,记住谁的外边距较大就采用谁的外边距就ok了. 水平排列的盒子不存在合并的问题. 下面实验证实: <!DOCTYPE html> <html lang="en"

CSS外边距合并（塌陷/margin越界）

原文简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5.出现的情况 1.什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.而左右外边距不合并. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种

margin 外边距合并问题

一.兄弟元素的外边距合并效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,同时该值作为父元素的上外边距.即使父元素的上外边距为0,也会发生合并.(只有垂直方向才会发生塌陷) 解决方法: 1. 为父元素定义1像素的上边框. 2. 为父元素定义1像素的上内边距. 3. 为父元素添加overflow:hi

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

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

为什么margin-top不是作用于父元素【margin外边距合并问题】

coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中非常的常见,必须对此有明确的把握,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面结合实例代码对margin外边距合并做一下总结.外边距合并概念:相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并.水平方向不存在此现象.外边

css3两个盒子垂直外边距合并

热门专题