html图片垂直边距,html – 为什么水平边距不会像垂直边距那样崩溃？

由于管理边际崩溃的规则意味着他们永远无法满足条件,因此水平边距永远不会有崩溃的机会.

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

相邻的框只能是块级框：

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

如果它们没有浮动或绝对定位,则边距只会崩溃：

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Margins of elements that establish new block formatting contexts (such as floats and elements with ‘overflow’ other than ‘visible’) do not collapse with their in-flow children.

Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

这意味着块级框永远不能水平放置在同一条线上(默认情况下块级框将自动在新线上开始)并同时满足边距折叠条件.

从理论上讲,内联框可以满足条件,但由于它们不是块级,因此规则根本不适用于它们.

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

也就是说,他们不崩溃的简单原因是W3C这么说：

Horizontal margins never collapse.

html图片垂直边距,html – 为什么水平边距不会像垂直边距那样崩溃？相关推荐

html盒子距离上边距50px,Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
BFC与垂直外边距折叠笔记
BFC与垂直外边距折叠 BFC BFC是什么(Block formatting contexts) Boxes in the normal flow belong to a formatting co ...
html垂直边距,html – Styling Bootstrap的btn-group-justified,添加边距和垂直尺寸
HTML Option 1 Option 2 Option 3 CSS .blocks .btn-primary { padding: 24px 12px; margin: 0 5px; border ...
大小不固定的图片、多行文字的水平垂直居中
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想 ...
html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
1.text-align:center实现图片水平居中 text-align一般用于文本的水平居中,也可以用于图片,代码如下: CSS部分: div{ text-align:center; width ...
CSS布局：设置图片在DIV中上下左右居中(水平和垂直都居中)
CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: <sty ...
显示器点距测试软件,液晶显示器常见、尺寸、分辨率、点距
12.1英寸 (800×600) - 0.308mm 12.1英寸 (1024×768) - 0.240mm 12.1英寸 (1280×800) - 0.204mm 13.3英寸 (1024×768) ...
显示器点距测试软件,在小屏幕上使用高分的点距问题_液晶显示器_液晶显示器新闻-中关村在线...
我们都知道,屏幕分辨率的升级是需要伴随着屏幕大小提升的,分辨率从1080P,到2K,4K,8K,甚至10K,尺寸也从十几英寸寸到一百英寸以上不等,随着大屏高分产品价格的不断降低,似乎1080P即将成为 ...

html图片垂直边距,html – 为什么水平边距不会像垂直边距那样崩溃？

html图片垂直边距,html – 为什么水平边距不会像垂直边距那样崩溃？相关推荐

最新文章

热门文章