margin-bottom: auto 是如何计算的？

Question

我注意到我的#thingdiv下面有很多空的space。我的 #thing 边距设置为 margin: 100px auto;，所以我将其更改为 margin: 100px auto 0px auto;，空的 space 消失了。为什么 margin-bottom 设置为 auto 会创建一堆空的 space？它不只是试图填满可见屏幕，因为我的 div 超出了我的屏幕高度；我必须向下滚动才能看到空的 space.

Answer 1

有一定数量的隐式padding和margin赋予块级元素，包括html和body。如果您曾经遇到过 reset.css，那么您就知道您不是唯一觉得这令人沮丧的人。

使用右侧栏中的 Chrome Developer Tools 的 "Box Model" 工具查看这些图形的可视化（右键单击元素，"Inspect element"，"Computed"）。

Answer 2

shorthand margin: 100px auto; 扩展为 margin: 100px auto 100px auto; 这意味着：

margin-top: 100px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;

所以你没有看到额外的 space 因为 margin-bottom: auto;。事实上，值auto赋值给margin-top或margin-bottom时没有任何意义。

编辑： 请参阅下面@web-tiki 关于 auto 与 margin-top 和 [=17 的用例的评论=].

作为参考，margin 的 shorthand 选项是：

margin: [top] [right] [bottom] [left];
margin: [top] [right/left] [bottom];
margin: [top/bottom] [left/right];

margin-bottom: auto 是如何计算的？

How is margin-bottom: auto calculated?

html

css

margin