歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:阿森纳热刺 > DIV+CSS基礎 >

阿森纳热刺 www.tzxsac.com.cn 阿森纳热刺 外邊距,阿森纳热刺與div間距設置基礎之css margin DIV CSS margin外邊距外補白邊距樣式屬性

margin用于設置對象標簽之間距離間隔,比如2個上下排列的DIV盒子,我們就可以使用margin樣式實現上下2個盒子間距。Margin呈現是位于對象邊框外側,緊貼于邊框,marign與padding位置卻相反css padding卻是緊貼邊框位于邊框內側。

目錄
  1. margin語法與應用結構
  2. css margin縮寫簡寫
  3. 常用的margin樣式
  4. css margin用法案例
  5. css margin總結

一、margin基礎語法與結構   -  TOP

阿森纳热刺外邊距指CSS屬性單詞margin,margin是設置對象四邊的外延邊距,沒有背景顏色也無顏色。

1、margin語法
Margin:10px
Margin的值是數字+html單位,同時也可以為auto(自動、自適應)

2、應用結構
Div{margin:10px}
設置div對象四邊間距為10px

3、Margin說明
margin是設置對象外邊距外延邊距離。
margin的值有三種情況,可以為正整數和負整數并加單位如PX像素(margin-left:20px);可以為auto自動屬性(margin-left:auto 自動);可以為百分比(%)值(margin-left:3%)。

Margin延伸(單獨設置四邊間距屬性單詞)
margin-left 對象左邊外延邊距 (margin-left:5px; 左邊外延距離5px)
margin-right 對象右邊外延邊距 (margin-right:5px; 右邊外延距離5px)
margin-top 對象上邊外延邊距 (margin-top:5px; 上邊外延距離5px)
margin-bottom 對象下邊外延邊距 (margin-bottom:5px; 下邊外延距離5px)

margin用處示范圖
常見margin使用場景

4、margin實際應用地方
兩個布局之間距離設置。
css實例教程范例margin視圖
如上圖中“CSS手冊”和“DIV CSS研教室”黃顏色的背景之間空隙(背景土紅)。

二、css margin縮寫簡寫  -  TOP

margin屬性CSS樣式,如遇到上下、左右、上下左右等情況我們可以縮寫簡寫優化。
你可能需要了解:CSS優化-CSS壓縮//www.tzxsac.com.cn/jiqiao/j97.shtml
你可能需要了解:HTML優化-HTML代碼優化壓縮//www.tzxsac.com.cn/jiqiao/j326.shtml

1、只有上下情況縮寫
原始:margin-top:5px; margin-bottom:6px
縮寫簡寫為:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情況縮寫
原始:margin-left:5px; margin-right:6px
縮寫簡寫為:margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三邊情況縮寫
原始:margin-top:5px; margin-bottom:6px; margin-left:4px
縮寫:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四邊相同值縮寫
原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
縮寫:margin:5px;

5、四邊不同值縮寫
原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
縮寫:margin:5px 8px 6px 7px;

6、四邊其中上下值和左右值各相同縮寫

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
縮寫:margin:5px 7px;

Margin簡寫分析圖:

margin css樣式簡寫優化分析圖
阿森纳热刺 margin樣式簡寫語法應用分析圖

三、常用的margin樣式   -   TOP

1、用margin設置對象盒子間距
我們常用margin設置2個盒子之間距離,無論上下左右的距離我們均可以利用margin實現間隔。

實際margin應用地方
實際可用margin地方示圖

2、利用margin實現布局居中,基礎單詞:
marign:0 auto;
即可實現對象居中,但需要一個條件,那就是該對象上級一定要設置text-align:center內容居中屬性樣式。有的瀏覽器body標簽不設置text-align:center內容居中樣式,其下級包含對象設置了margin:0 auto也會讓其布局居中,但為了兼容各大瀏覽器建議對body設置一個text-align:center屬性樣式,這里阿森纳热刺提供一個css初始化模板阿森纳热刺時候無需重復設置css text-align:center等初始化樣式屬性。

四、css margin普通案例   -   TOP

DIVCSS5設置2個盒子,為了體現margin作用,我們對其2盒子設置css border邊框、一定css寬度css高度。

1、margin用法css代碼
.divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1px solid #F00}
.divcss5-bottom{ margin-top:10px}

2、html代碼片段
<div class="divcss5-top">上對象</div>
<div class="divcss5-bottom">下對象,我們設置了margin-top為10px間距</div>

3、mairgin應用案例截圖

div+css margin實例案例效果截圖
margin實例實踐案例效果圖

從上案例我們分析出margin是設置對象(比如div盒子、span盒子等)之間間距,并體現出margin是存在與對象盒子邊框外側。

五、css margin總結   -   TOP

Margin樣式是設置對象與對象之間間距,單獨設置一邊的間距我們可以使用margin-left、margin-right、margin-top、margin-bottom樣式屬性,margin是設置盒子對象之間間距,一般設置時候注意margin簡寫優化。多實踐并觀察案例理解了margin作用即可很快上手使用margin。

margin缺點:
在使用CSS margin的時候容易造成CSS HACK。IE6解釋此屬性的時候容易造成雙倍距離。
您可能需要了解CSS兼容瀏覽器知識。

你可以再了解以前阿森纳热刺介紹margin知識://www.tzxsac.com.cn/shili/s6.shtml。

相關閱讀
CSS 顏色
CSS 文本
CSS padding
CSS margin

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/rumen/r128.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
阿森纳热刺文章修訂日期:2018-08-14 17:37 原創:阿森纳热刺
本文阿森纳热刺 www.tzxsac.com.cn DIVCSS5版權所有。