CSS中margin不起作用的原因及解決方法

margin是一個屬性，指定元素和元素之間的間距，但不能為內聯元素指定邊距，本篇文章將給大家介紹關於CSS中margin不起作用的原因及解決方法。

margin不起作用的原因

對於初學者來說，可能會經常遇到即使你設定了margin屬性但是卻不起作用。

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

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

我們來看具體的範例

##HTML

<h3 id="这是一个内联块">这是一个内联块</h3>

CSS

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

瀏覽器上顯示效果如下：

#「margin:0 auto;」對於inline -block不起作用。

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

「text-align：center;」不會讓父元素成為選擇器

「text-align：center;」的基本規則是「selector是父元素」。在上面的範例中，如果要將其居中，則必須建立父元素。

了解了上述內容後，您就可以解決它了。

HTML

  <h3 id="这是一个内联块">这是一个内联块</h3>

CSS

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

效果如下：

本篇文章到這裡就全部結束了，關於margin屬性的更多內容大家可以關注php中文網的

CSS視頻教程進一步學習！ ！ ！

以上是CSS中margin不起作用的原因及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！