CSS margin 屬性

例

設置一個p元素的所有四個邊距：

{

margin:2cm 4cm 3cm 4cm;

}

屬性定義及使用說明

margin簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1到4個值。

實例:

margin:10px 5px 15px 20px;

上邊距是 10px
右邊距是 5px
下邊距是 15px
左邊距是 20px

margin:10px 5px 15px;

上邊距是 10px
右邊距和左邊距是 5px
下邊距是 15px

margin:10px 5px;

上邊距和下邊距是 10px
右邊距和左邊距是 5px

margin:10px;

所有四個邊距都是 10px

注意： 負值是允許的。

默認值：	0
繼承：	no
版本：	CSS1
JavaScript 語法：	object.style.margin="10px 5px"

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

屬性
margin	1.0	6.0	1.0	1.0	3.5

屬性值

值	描述
auto	瀏覽器計算外邊距。
length	規定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px。
%	規定基于父元素的寬度的百分比的外邊距。
inherit	規定應該從父元素繼承外邊距。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

幾天我在面試前端開發同學的時候，有問到關于margin基礎布局相關內容的過程中，發現很多同學基本解釋不清楚，今天剛好有點時間就整理了一篇筆記出來。就以下5點在CSS布局經常會用到的經典布局解決方案。

css中margin外邊距（重疊）合并現象
css中margin外邊距穿透現象
css中margin設置負值時的特性
css經典3列自適應布局：圣杯布局
css經典3列自適應布局：雙飛翼布局

可以嘗試動手試一試，有什么疑問！可隨時交流，有問必答。

margin 縱向重疊（合并）問題

元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并，合并后的間距就是兩者中最大的那個值。

1、以下代碼中，item1與item4之間的間距是多少？

<style>
    .box{
        margin-top:10px;/*上外邊距*/
        margin-bottom:20px;/*下外邊距*/
        height: 20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案：

解析：item1 與 item4 之間的間距為 3個下外邊距大小+2個盒子高度=20*3+20*2=100px

2、以下代碼中，item1與item4之間的間距是多少？

<style>
    .box{
        margin-top:10px;
        margin-bottom:20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案： item1與item4之間間距為 20px

解析：因為中間兩個box中沒有內容也沒有邊框線，所以外邊距會一直重疊合并，所以最后item1和item4之間距離只有一個下外邊距的大小

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

margin 穿透問題

當一個元素包含在另一個元素中時,如果父元素沒有設置內邊距或邊框把外邊距分隔開，它們的上或下外邊距也會發生合并。

<style>
    body{
        margin:0;
        padding:0;
    }
    .container{
        width:300px;
        height: 300px;
        background-color: salmon;   
        margin-top:100px;/*與瀏覽器頂部的距離*/
        border:5px solid blue;
    }
    .container .item{
        width:200px;
        height: 200px;
        background-color: skyblue;
        margin-top:50px;/*因為container中加了border邊框，所以這里的外邊距不會穿透合并*/
    }
    .container .item .box{
        width:100px;
        height: 100px;
        background-color: bisque;
        margin-top:10px;/*item沒有加邊框線，內邊距和其它內容，所以外邊距會發生穿透合并*/
        border:5px solid red;
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <div class="box"></div>
        </div>
    </div>
</body>

答案： 100px 、155px、155px
解析：
.container與瀏覽器頂部距離是100px，
.item與瀏覽器頂部距離100px + 5px+50px=155px
.box與瀏覽器頂部距離：100px+5px+50px=155px

margin負值問題

margin-left 設置負值，元素向左移動
margin-right 設置負值，自身不受影響，右邊元素向左移動
margin-top設置負值，元素向上移動
margin-bottom 設置負值，自身不受影響，下方元素向上移動

1、兩元素水平排列，左右外邊距設置負值時

<style>
    body{
        margin:0;
    }
    .container{
        width:500px;
        height:200px;
        padding:20px 0px;
        border:5px solid #ddd;
        margin:0px auto;
    }
    .container .common{
        width:200px;
        height: 200px;
        float: left;
    }
    .container .box1{
        background-color: skyblue;
        /* margin-left:-100px; 元素自身向左移動，右邊的元素也會受影響*/
        margin-right:-100px;/*元素自身不受影響，右邊元素向左移動*/
    }
    .container .box2{
        background-color: tomato;
    }
</style>
<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

當.container .box1中margin-left:-100px;時，如：圖1
當.container .box1中 margin-right:-100px;時，如：圖2
當.container .box1設置margin-left:-100px;和margin-right:-100px時，如：圖3

2、兩元素垂直排列，上下外邊距設置負值時

<style>
    body{
        margin:0;
    }
    .container{
        height: 500px;
        width: 200px;
        padding:0px 20px;
        border:5px solid #ddd;
        margin-top:100px;
    }
    .container .common{
        width:200px;
        height: 200px;
    }
    .container .box1{
        background-color: skyblue;
        /*margin-top:-100px;元素向上移動，下方元素也會受影響*/
        margin-bottom:-100px;/*自身不受影響，下方元素向上移動*/
    }
    .container .box2{
        background-color: rgba(0,0,255,0.5);
    }
</style>

<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

當.container .box1中margin-top:-100px時，如：圖 1
當.container .box1中margin-bottom:-100px時，如：圖 2
當.container .box1中同時設置margin-top:-100px; 和margin-bottom:-100px;時，如：圖 3

3、經典布局：圣杯布局

這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利。
兩邊內容固定，中間內容自適應

<style>
    body{
        margin:0;
        /*核心代碼*/
        min-width: 650px;/*當頁面寬度不夠時，出現滾動條而不會造成布局錯亂*/
    }
    .clearfix::after{
        display: block;
        content: "";
        clear: both;
    }
    .fl{/*核心代碼*/
        float:left;/*三個盒子一定要添加浮動*/
    }
    .header{
        height: 100px;
        background-color: tomato;
    }

    .container{
        padding-left:200px;/*左邊預留200px位置  用來放left*/
        padding-right:250px;/*右邊預留200px位置  用來放right*/
    }
    .container .center{
        width:100%;/*自適應container的寬度，實現自適應縮放*/
        height: 500px;
        background-color: skyblue;
    }
    .container .left{
        width:200px;
        height: 500px;
        background-color:cadetblue;
        /*核心代碼*/
        margin-left:-100%;/*盒子向左移，因為加了浮動，所以會移動到上一行的最左邊*/
        position: relative;/*利用相對定位，再把盒子往左移200px就占據了最左邊預留的200px空間*/
        left:-200px;
    }
    .container .right{
        width:250px;
        height: 500px;
        background-color:aquamarine;
        /*核心代碼*/
        margin-right:-250px;/*加上這個代碼，相當于right沒有一點寬度，就會移動到上的最右邊位置*/
    }
    .footer{
        height: 100px;
        background-color: #000;
    }
</style>
<body>
    <div class="header">頭部</div>
    <div class="container clearfix">
        <div class="center fl">中間</div>
        <div class="left fl">左邊</div>
        <div class="right fl">右邊</div>
    </div>
    <div class="footer">底部</div>
</body>

4、經典布局：雙飛翼布局

這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利。
兩邊內容固定，中間內容自適應

<style>
    body{
        margin:0;
    }
    .fl{/*核心代碼*/
        float: left;/*一定要添加浮動*/
    }
    .main{
        background-color: #ddd;
        width:100%;
    }
    .main .main-content{
        background-color: skyblue;
        height: 300px;
        /*核心代碼*/
        margin:0 200px 0 200px;/*盒子左右兩邊余留200px，分別給left和right來占用*/
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: coral;
        /*核心代碼*/
        margin-left:-100%;/*往左移動瀏覽器的寬度，最后移動到上一行的最左邊*/
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: tomato;
        /*核心代碼*/
        margin-left:-200px;/*相當于自身寬度為0了，因為加了浮動，然后就顯示在了上一行的最右邊*/
    }
</style>
<body>
    <div class="main fl">
        <div class="main-content">中間</div>
    </div>
    <div class="left fl">左邊</div>
    <div class="right fl">右邊</div>
</body>

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。

在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。

雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。

盒子模型概念

所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。

Div+CSS 盒子模型

說明：

1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。

2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。

3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。

4、Content：內容，盒子的內容，顯示文本和圖像。

5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。

6、盒子實際尺寸有可能大于內容尺寸：

盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;

盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;

實例演示--原始樣式

接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。

頁面如圖所示：

原始樣式

代碼：

HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}

Border

元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。

按如下代碼設置Div(TsetMiddle)的Border（邊框）：

border-style:solid;
border-width: 10px;
border-color: aqua;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。

Border

Margin

margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；

按如下代碼設置Div(TsetMiddle)的margin（外邊距）：

margin: 30px auto;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。

Margin

Padding

Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。

按如下代碼設置Div(TsetMiddle)的margin（外邊距）：

padding: 30px;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。

Padding

總結

1、各屬性的值可以用px為單位，也可以用em，百分比等。

2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。

在線咨詢

上一篇：HTML常用布局標簽：提升網頁顏值！不可不知的HTML布局技巧全解析
下一篇：HTML DOM Radio 對象

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS margin 屬性

1、以下代碼中，item1與item4之間的間距是多少？

2、以下代碼中，item1與item4之間的間距是多少 ？

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少 ？

margin負值問題

1、 兩元素水平排列，左右外邊距設置負值時

2、兩元素垂直排列，上下外邊距設置負值時

3、經典布局：圣杯布局

4、經典布局：雙飛翼布局

盒子模型概念

實例演示--原始樣式

Border

Margin

Padding

總結

您的項目需求

2、以下代碼中，item1與item4之間的間距是多少？

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

1、兩元素水平排列，左右外邊距設置負值時