溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“CSS的Margin和Padding屬性有什么用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS的Margin和Padding屬性有什么用”文章吧。
CSS的Margin和Padding屬性
margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素里邊。
例子h3：
h3{
font-size:1.5em;
background-color:#ccc;
margin:1em;
padding:3em;
}元素四邊可以設置的屬性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left
CSS盒模型BoxModel
width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。但是由于瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍
width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。
但是由于瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。
左右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。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
以上就是關于“CSS的Margin和Padding屬性有什么用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
