CSS中margin不起作用怎么辦-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計,成都做網(wǎng)站、成都網(wǎng)站建設(shè),網(wǎng)站設(shè)計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為近1000家服務(wù),創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

margin不起作用的原因

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

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

CSS中margin不起作用怎么辦

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

我們來看具體的例子

HTML

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

CSS

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

瀏覽器上顯示效果如下：

CSS中margin不起作用怎么辦


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

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

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

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

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

HTML

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

CSS

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

效果如下：

CSS中margin不起作用怎么辦

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

當(dāng)前文章：CSS中margin不起作用怎么辦-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://bm7419.com/article38/gdgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、定制開發(fā)、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司