溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS中margin屬性怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS中margin屬性怎么用”這篇文章吧。
CSS 外邊距
圍繞在元素邊框的空白區(qū)域是外邊距。設置外邊距會在元素外創(chuàng)建額外的“空白”。
設置外邊距可以使用 margin 屬性，這個屬性接受任何長度單位、百分數(shù)值甚至負值。
CSS margin 屬性
設置外邊距的最簡單的方法就是使用 margin 屬性。
margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em，也可以直接設置為 auto。
常見的做法是為外邊距設置長度值。例如，在 h2 元素的各個邊上設置了 1/4 英寸寬的空白：
h2 {margin : 0.25in;}下面的例子為 h2 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：
h2 {margin : 10px 0px 15px 5px;}注釋：與內(nèi)邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉(zhuǎn)的。
提示：與內(nèi)邊距的設置相同，設置為百分比數(shù)值時，百分數(shù)是相對于父元素的 width 計算的。
提示：margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現(xiàn)外邊距。
但是，在實際中，瀏覽器對許多元素已經(jīng)提供了預定的樣式，外邊距也不例外。
例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。
因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。
當然，只要你特別作了聲明，就會覆蓋默認樣式。
值復制
有時，我們會輸入一些重復的值，例如：
p {margin: 0.5em 1em 0.5em 1em;}通過值復制，您可以不必重復地鍵入這對數(shù)字。上面的規(guī)則與下面的規(guī)則是等價的：
p {margin: 0.5em 1em;}提示：CSS 定義了一些規(guī)則，允許為外邊距指定最多 4 個值。規(guī)則如下：
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
利用這個簡單的機制，您只需指定必要的值，而不必全部都應用 4 個值，例如：
h2 {margin: 0.25em 1em 0.5em;} /* 等價于 0.25em 1em 0.5em 1em */
h3 {margin: 0.5em 1em;} /* 等價于 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等價于 1px 1px 1px 1px */提示：如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。
單邊外邊距屬性
使用單邊外邊距屬性為元素單邊上的外邊距設置值。例如，設置 p 元素的左外邊距為 20px：
p {margin-left: 20px;}您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：
margin-top
margin-right
margin-bottom
margin-left
一個規(guī)則中可以使用多個這種單邊屬性，例如：
h3 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}當然，對于這種情況，使用 margin 可能更容易一些：
p {margin: 20px 30px 30px 20px;}提示：不論使用單邊屬性還是直接使用 margin，應該選擇對自己來說更容易的一種方法。
提示和注釋
Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px。而 Opera 不是這樣。
相反地，Opera 將內(nèi)部填充（padding）的默認值定義為 8px。
如果要對整個網(wǎng)站的邊緣部分進行調(diào)整，必須對 body 的 padding 和 margin 進行自定義。
CSS 外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注釋：請注意，如果不設置 div 的內(nèi)邊距和邊框，</p>
<p>那么內(nèi)部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。</p>
</body>
</html>
所有的外邊距屬性在一個聲明中
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>這個段落沒有指定外邊距。</p>
<p class="margin">這個段落帶有指定的外邊距。</p>
<p>這個段落沒有指定外邊距。</p>
</body>
</html>
CSS 外邊距 屬性及描述
margin：簡寫屬性。在一個聲明中設置所有外邊距屬性。
margin-bottom：設置元素的下外邊距。
margin-left：設置元素的左外邊距。
margin-right：設置元素的右外邊距。
margin-top：設置元素的上外邊距。
以上是“CSS中margin屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
