顶部,边缘顶部和填充顶部---它们有何不同?

时间:2013-03-07 18:09:17

标签: css

问题是:它们有何区别?

我的理解是这样的:

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

    2 个答案:

    答案 0 :(得分:1)

    根据我搜索的内容:

    边距位于块元素的外部,而填充位于内部,顶部使元素独立(位置明确)。

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

    答案 1 :(得分:1)

    边距

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

    边距位于元素框之外。

    铁垫

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

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

    另一方面,顶部将取代所述元素:

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

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