css margin属性理解与使用

最近应公司需要，暂转为前端学习-开发。确实，最近前端因为一个“小程序”被炒得热火朝天。当然这并不意味着从此脱离了Android，简书依然会记录一些Android学习-开发的心路历程，当然以后不再是单纯的Android文章了，可能还包括web在内的一些其他开发知识的记录。

在css中，margin的使用和android中的使用有着很大的不一样，尤其在做过android开发之后再去接触css，俨然有种要崩溃的感觉。但是没办法。这都是命~

css中普通元素之间设置margin好像并无不妥，但是在css中，这一切远没有那么简单。

1、关于垂直外边距合并问题：

导致这一问题的根本原因是上下元素之间没有设置界限限制，因此在给下面的元素设置margin之后，其父元素会跟随移动。为了更为形象的说明这其中的关系，这里引用w3cSchool的图片

YY@E8XZ$}1YJ362}8C0_QFD.png

2、关于元素的居中

css中可以通过设置左右margin来使自身居中（注意这里是指元素本身，而且当前元素为block）

div{
  margin 0 auto;
}

而如果要使得div内居中，则需要通过设置text-align和vertical-align，其中vertical-align在设置line-height之后起作用。

3、对于一些元素而言，其默认是有边距的，那么为了消除其边界距离，我们通过需要设置margin padding 或者border为0来解决。