本篇文章為大家展示了CSS中Margin和Padding屬性的作用是什么,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:國際域名空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、安慶網(wǎng)站維護(hù)、網(wǎng)站推廣。
詳細(xì)學(xué)習(xí)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的寬度依次加在外面。背景會(huì)填充padding和content部分。但是由于瀏覽器設(shè)計(jì)上的問題,不同瀏覽器顯示效果會(huì)有些不同。左右Margin加倍的問題當(dāng)box為float時(shí),IE6中box左右的margin會(huì)加倍
W3C定義的盒模式如下:
width和height定義的是Content部分的寬度和高度,paddingbordermargin的寬度依次加在外面。背景會(huì)填充padding和content部分。
但是由于瀏覽器設(shè)計(jì)上的問題,不同瀏覽器顯示效果會(huì)有些不同。
左右Margin加倍的問題
當(dāng)box為float時(shí),IE6中box左右的margin會(huì)加倍。比如:
<!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。
這時(shí)候,定義inner的display屬性為inline。
上述內(nèi)容就是CSS中Margin和Padding屬性的作用是什么,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享名稱:CSS中Margin和Padding屬性的作用是什么
本文來源:http://muchs.cn/article4/johioe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)