margintop(margintop塌陷)

margin-top是什么意思

margin-top

上边距；上边距属性；顶端边距

例句

1.When printing lists, contains the number of lines on the top margin.

在打印清单时，包含了顶端空白的行数。

2.Under Spacing, type in the values you want for Side Margin, Top Margin, Horizontal Gap, and Vertical Gap.

在“间距”下，键入“侧边距”、“上边距”、“水平跨度”和“垂直跨度”的值。

3.When you open a document, is the insertion point at the top left corner of the page, as if there were no top margin?

打开文档时，插入点是否在页面的左上角，就好像没有上边距？

4.A gutter margin setting adds extra space to the side margin or top margin of a document that you plan to bind .

装订线边距设置将为要装订的文档两侧或顶部边距添加额外的空间。

5.Form: Mint, single, with top margin.

形式：单枚新票，带上边纸。

css中margin-top和top有什么区别

一、功能不同

1、margin-top：功能为设置元素的上外边距。

2、top：规定元素的顶部边缘。

二、特点不同

1、margin-top：允许使用负值。定义固定的上外边距。默认值是 0。

2、top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

三、规定不同

1、margin-top：所有主流浏览器都支持 margin-top 属性。

2、top：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

参考资料来源：百度百科-CSS top

参考资料来源：百度百科-CSS margin-top

给子盒子设置margin-top时，会作用于父盒子的解决办法

如何将子盒子垂直居中于父盒子？新手可能会想到使用margin，

但是子盒子设置margin-top后，会作用于父盒子，如图1

造成这个现象的原因是：

1.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加。

2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

解决办法如下？

方法一：为父元素设置border

方法二：为父元素添加overflow：hidden；样式

方法三：为父元素或者子元素声明浮动

方法四：为父元素或者子元素声明绝对定位

margin-top的传递问题

在HTML中 一个父元素包裹一个子元素的div，在给子元素的div设置margin-top时，会传递给父元素

个人不太建议使用前两种方法，不仅需要计算，改父元素的高度， 而且给父元素加padding-top的方法在微信小程序里无效 。最后两种方法都是让父元素脱离文档流，但有的时候可能会影响布局。所以个人推荐使用给父元素添加overflow：hidden的方法。

2020-12-7更新：

使用padding-top的方法要将给父元素 box-sizing: border-box; 否则，padding-top会把父元素撑大，尤其是在给最外层元素添加padding-top时会把页面顶下去。