margin0auto失效

一、margintop失效情况

在使用margin的时候，有时候我们不仅会出现margintop失效的情况，还会出现其他的类似情况。这主要是由于元素的定位和大小问题导致的，具体分析如下：

1、元素被定位为absolute或fixed，将其父元素设置为relative或absolute即可解决。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 20px;
  margin-top: 20px; /* 失效 */
}

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 20px;
  marginTop: 20px; /* 生效 */
}

2、元素被float或clear设置，将其父元素也设置为float或clear即可。

.parent {
  float: left;
}
.child {
  margin-top: 20px; /* 失效 */
}

.parent {
  float: left;
  clear: both;
}
.child {
  margin-top: 20px; /* 生效 */
}

二、margin0auto不生效

margin0auto的经典用法是使元素在水平方向上居中，但有时候它会失效，出现元素无法居中的情况，这个问题通常由于以下原因导致：

1、元素的display属性不符合要求，必须为block或flex才能使用margin0auto来实现居中。

.element {
  display: inline-block;
  margin: 0 auto; /* 失效 */
}

.element {
  display: block;
  margin: 0 auto; /* 生效 */
}

2、元素没有设置宽度，必须给元素设置宽度才能使margin0auto生效，否则它会变成marginauto。

.element {
  margin: 0 auto; /* 失效 */
}

.element {
  width: 500px;
  margin: 0 auto; /* 生效 */
}

三、margin0auto怎么用

除了上面提到的使用场景，margin0auto还有一些其他的实用技巧：

1、可以用来水平居中一个浮动元素，同时也防止浮动元素下面的元素跟随它而浮动。

.parent {
  overflow: hidden;
}
.child {
  float: left;
  margin: 0 auto; /* 生效 */
}

2、可以用来垂直居中一个元素，注意此时必须设置父元素高度，并且子元素的高度不能大于父元素。

.parent {
  height: 400px;
}
.child {
  height: 200px;
  margin: auto 0; /* 生效 */
}

3、在两个元素之间留出空隙。

.left {
  float: left;
  width: 200px;
}
.right {
  float: left;
  width: 200px;
  margin-left: auto;
}

四、总结

在使用margin的时候，出现失效情况通常是由于元素的定位和大小问题导致的，因此合理使用定位和宽高是保证margin能够正常工作的关键。