margin不起作用的原因

對于初學(xué)者來說，可能會(huì)經(jīng)常遇到即使你設(shè)置了margin屬性但是卻不起作用。

在理解margin前，我們先來看一下盒模型

margin不起作用的原因往往是沒有考慮到display：“display:block”或者“display:inline”.

我們來看具體的例子

HTML

<h3>這是一個(gè)內(nèi)聯(lián)塊</h3>

CSS

h3{
  display:inline-block;
  background:#ffff00;
  width:12em;
  text-align:center;
  margin:0 auto;
}

瀏覽器上顯示效果如下：

“margin:0 auto;”對于inline-block不起作用。

即使可以首先使用數(shù)值指定“inline-block”，使用“margin：0 auto;”居中也不起作用。

“text-align：center;”不會(huì)使父元素成為選擇器

“text-align：center;”的基本規(guī)則是“selector是父元素”。在上面的示例中，如果要將其居中，則必須創(chuàng)建父元素。

了解了上述內(nèi)容后，您就可以解決它了。

HTML

<div class="wrap">
  <h3>這是一個(gè)內(nèi)聯(lián)塊</h3>
</div>

CSS

h3{
  display:inline-block;
  background:#ffff00;
  width:12em;
  margin:0 auto;
}
.wrap{
  text-align:center;
}

效果如下：

本篇文章到這里就全部結(jié)束了，關(guān)于margin屬性的更多內(nèi)容大家可以關(guān)注php中文網(wǎng)的CSS視頻教程進(jìn)一步學(xué)習(xí)！！！

以上就是CSS中margin不起作用的原因及解決方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！