MDN suggests表示margin-left: autoposition: absolute将左边距设置为0,但实际上似乎不是这样.我现在想知道这是浏览器中的一个bug,还是MDN文档中的一个bug,因为我的示例似乎与右图一致.

fixed or absolute
0, except if both margin-left and margin-right are set to auto.

本例中,margin-left设置为automargin-right未指定(即初始值为0),左边距的计算似乎采用了剩余的空间,而不是上面来源所建议的0:https://jsfiddle.net/40txneL7

我还发现a snippet in the spec表示剩余空间在auto个边距之间划分,如果只设置了一个轴边距,则不设置为0.

这里的MDN文档是不正确的,还是我遗漏了什么?

推荐答案

关于绝对位置的宽度和位置有很多规则,你可以在这里读到:https://www.w3.org/TR/css-position-3/#abs-non-replaced-width

确定这些元素所用值的约束是:

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block

我们没有填充,以下规则适用:

如果这三个都不是自动的:...如果margin-leftmargin-right中的一个是自动的,则求解该值的方程式.如果这些值受到过度约束,请忽略"左"的值

所以你会

0px(left) + margin-left + 200px(width) + 0px(margin-right not specfied) + 0px(right) = width of containing block

在你的例子中,包含块是视口,所以我们有100%的屏幕宽度.如果我们解这个方程,你会得到

margin-left = viewport width - 200px

所以不等于0.您可以通过判断Dev工具来验证这一点

enter image description here

对于其他情况,我们将保证金设为0.如果您继续阅读规范,您可以找到:

否则,将"自动"值设置为margin-leftmargin-right为0,并从以下六条适用规则中 Select 一条.

Html相关问答推荐

输入宽度在表格显示上不起作用FLEX溢出隐藏Firefox

如何使用css为动态用户输入矩阵添加背景色?

损坏的可点击html邮箱签名

VBA从公共Google Drive地址下载文档-.Click事件(?)

将2个Flex列合并为1个交替子列

Style=背景图像URL引用变成&;Quot;

为什么我得不到有错误的字段?迈克尔·哈特尔教程.7.3.3

如何用css在右侧创建多个半圆

创建特定的CSS网格布局

在TWebLabel标题中设置换行符/换行符的方法?

如何使链接组件内的内容不重新路由Next.js13

我如何确保我的网格永远不会小于它的子网格

如何 Select 表格';TMS Web Core中的body html元素?

悬停表格单元格文本时,使元素的字体大小更大,同时保持表格单元格的高度不变

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

为什么即使我点击其他地方,我的 contenteditable="true" 也会被激活?

CSS 字母间距将按钮向右扩展

表格布局:固定;文本溢出单元格时不起作用

粘性定位的子元素忽略父母的填充

如何使用 Rvest 抓取带有嵌套列的 HTML 表?