<form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

        <address id="ddzdh"><nobr id="ddzdh"></nobr></address>

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

              CSS 外邊距,div與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

              DIV CSS外邊距指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壓縮http://www.yfzzdoors.com/jiqiao/j97.shtml
              你可能需要了解:HTML優化-HTML代碼優化壓縮http://www.yfzzdoors.com/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樣式簡寫優化分析圖
              css div 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屬性樣式,這里divcss5提供一個css初始化模板DIV 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兼容瀏覽器知識。

              你可以再了解以前divcss5介紹margin知識:http://www.yfzzdoors.com/shili/s6.shtml。

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

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

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

              人妻AV乱片AV,A∨天堂网在线观看免费,希崎杰西卡亚洲精品中文字幕

                  <form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

                    <address id="ddzdh"><nobr id="ddzdh"></nobr></address>