CSS中margin不起作用怎么辦

這篇文章將為大家詳細(xì)講解有關(guān)CSS中margin不起作用怎么辦，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注于網(wǎng)站建設(shè)|成都網(wǎng)站改版|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋酒樓設(shè)計(jì)等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開發(fā)品質(zhì)網(wǎng)站。

margin不起作用的原因

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

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

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

我們來看具體的例子

HTML

這是一個(gè)內(nèi)聯(lián)塊

CSS

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

瀏覽器上顯示效果如下：

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

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

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

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

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

HTML

  
這是一個(gè)內(nèi)聯(lián)塊

CSS

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

效果如下：

關(guān)于CSS中margin不起作用怎么辦就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁名稱：CSS中margin不起作用怎么辦
網(wǎng)頁鏈接：http://m.jiaotiyi.com/article/goghsj.html