margin怎么用

margin的塌陷问题：

元素和元素在垂直方向上的margin会有塌陷问题。会以margin数值大的为准，大的会覆盖掉小的。

例子

当给两个标准流下兄弟盒子设置垂直方向上的margin时，那么以较大的为准，那么我们成这种现象叫塌陷，没法解决。当设置浮动后就不会有塌陷现象了。

margin:0 auto;

例子

当div盒子设置 margin: 0 auto;盒子会自动居中。

使用margin: 0 auto; 要注意：

1使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位(后面会讲)， 不能用了

3margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

margin属性是描述兄弟盒子的关系。

善于使用父盒子的padding来调整子盒子的位置：

使用padding属性调整上图红色盒子的位置：

例子

好文要顶 关注我 收藏该文

Qingqiu_Gu

关注 - 3

粉丝 - 24

+加关注

0 0

« 上一篇： 块级元素和行内元素

» 下一篇： 文本属性和字体属性

HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

margin在块级元素下，他的性能可以完全体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素（即相对于自身之前的元素有margin距离）。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）。

1、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。

2、在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。

3、得到的结果是一个数组对象，只要获取里面的top数据就行了。

4、使用log方法，把数据输出到浏览器的控制台。

5、运行页面，看到现在的按钮位置。距离顶部估计是500px左右吧，点击一下这个按钮。

6、然后看一下控制台上的数据，得到距离为439的像素。

以上就是关于margin怎么用全部的内容，包括:margin怎么用、margin、padding在块元素行内元素的区别、如何获取元素距离页面顶部的高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！