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能夠正常工作的關鍵。