顶部，边缘顶部和填充顶部---它们有何不同？

Question

问题是：它们有何区别？

我的理解是这样的：

margin-top类似于我们在MS Word中习惯使用的保证金。这更像是页面周围的空白区域。使用时，它确定内容与其包含元素的距离与内容的距离。如果内容位于div标记中，则相对于div计算位置，但如果没有包含元素，则将相对于浏览器计算该位置。它确实压低了其他内容。

top用于推送内容，用作position属性的 tweak 。它会在不损害其他内容的情况下推送内容。换句话说，它提供了细粒度的控制。

padding-top也会在向顶部添加空间的同时推送内容。

我能正确理解吗？

Answer 1

根据我搜索的内容：

边距位于块元素的外部，而填充位于内部，顶部使元素独立（位置明确）。

使用margin（margin-top）将块与其外部的东西分开，padding（padding-top）将内容从块的边缘移开，最后如果需要通过位置调用漫游元素

Answer 2

边距

边距受margin collapse影响 - 如果垂直边距被认为是相邻的（例如没有边界将它们分开），那么两个元素之间的分离将不是它们的总和相邻的边距，但两个边距中的较大者。同时，水平边距永不崩溃。

边距位于元素框之外。

铁垫

顶部衬垫按预期工作，并且不会崩溃。但是，顶部填充（以百分比定义）将是元素宽度的百分比，而不是高度。

填充物位于元素的框内。如果将元素的尺寸定义为500 * 500px并将填充设置为20px，则所述元素的实际尺寸将为540 * 540px（500 + 20 + 20）。这可以通过使用box-sizing: border-box来规避，它告诉浏览器渲染由width和height属性定义的元素，包括所有边框和填充。

顶

另一方面，顶部将取代所述元素：

• 它是父容器，如果父容器位于相对位置，
• 视口，如果所述元素具有固定位置，
• 文档，如果所述元素具有绝对位置且其父元素不相对定位。

更重要的是，顶部位置偏移百分比基于父级的高度，而不是宽度（与填充不同）。