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