0

问题是：它们有何不同？

我的理解是这样的：

  • margin-top类似于我们习惯的margin MS Word。这更像是页面周围的空白区域。使用时，它确定内容距顶部的距离或内容与其包含元素的距离。如果内容在div标签中，则位置将相对于计算，div但如果没有包含元素，则它将相对于浏览器计算。它确实压低了其他内容。
  • top用于下推内容并用作属性的调整。position它会在不损害其他内容的情况下将内容向下推。换句话说，它提供了细粒度的控制。
  • padding-top还会将内容向下推，同时在顶部增加空间。

    • 我得到这个正确吗？

    4

    2 回答 2

    1

    边距

    边距会遭受边距塌陷——如果垂直边距被认为是相邻的（例如，没有边框将它们分开），那么两个元素之间的间隔将不是它们各自的相邻边距之和，而是两个边距中较大的一个。同时，水平边距永远不会崩溃。

    边距位于元素的框之外。

    填充物

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

    填充位于元素的框内。如果将元素的尺寸定义为 500*500px 并将 padding 设置为 20px，则该元素的实际尺寸将为 540*540px (500 + 20 + 20)。这可以通过使用来规避box-sizing: border-box，它告诉浏览器呈现由宽度和高度属性定义的元素，包括所有边框和填充。

    最佳

    另一方面，顶部将从以下位置替换所述元素：

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

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

    于 2013-03-07T18:19:36.183 回答
    1

    根据我搜索的内容：

    边距在块元素的外部，而填充在内部，顶部使元素独立（位置方面）。

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

    于 2013-03-07T18:15:03.153 回答