溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS中Margin和Padding屬性的作用是什么

發(fā)布時間：2021-06-23 14:51:42 來源：億速云 閱讀：254 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了CSS中Margin和Padding屬性的作用是什么，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

詳細學習CSS的Margin和Padding屬性

margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素里邊。

例子h3：

h3{  font-size:1.5em;  background-color:#ccc;  margin:1em;  padding:3em;  }

元素四邊可以設(shè)置的屬性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left

CSS盒模型BoxModel

width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。但是由于瀏覽器設(shè)計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍

W3C定義的盒模式如下：

CSS中Margin和Padding屬性的作用是什么


width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。

但是由于瀏覽器設(shè)計上的問題，不同瀏覽器顯示效果會有些不同。

左右Margin加倍的問題

當box為float時，IE6中box左右的margin會加倍。比如：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>www.webjx.com</title> <style> .outer{  width:500px;  height:200px;  background:#000;  }  .inner{  float:left;  width:200px;  height:100px;  margin:5px;  background:#fff;  }  </style> </head> <body> <divclassdivclass="outer"> <divclassdivclass="inner"></div> <divclassdivclass="inner"></div> </div> </body> </html>

左面的inner的左面margin明顯大于5px。
這時候，定義inner的display屬性為inline。

上述內(nèi)容就是CSS中Margin和Padding屬性的作用是什么，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手