DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 11.5 外邊距margin
11.5 外邊距margin
編輯:CSS基礎知識     

外邊距margin,指的是邊框到父元素或者同級元素之間的那一部分。

一、margin局部樣式

從CSS盒子模型中,我們可以看出,內邊距分為四個方向的內邊距:margin-top、margin -right、margin -bottom、margin -left。這一點跟內邊距padding非常相似。

語法:

 
    margin-top:像素值;
    margin-right:像素值;
    margin-bottom:像素值;
    margin-left:像素值;

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS外邊距margin屬性</title>
    <style type="text/css">
        #main
        {
            display:inline-block;/*將塊元素轉換為inline-block元素*/
            border:1px solid #CCCCCC;
        }
        .lvye
        {
            display:inline-block; /*將塊元素轉換為inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FCE9B8;
        }
        span{border:1px solid blue;background-color:#C5FCDF;}
    </style>
</head>
<body>
    <div id="main">
        <div class="lvye"><span> 學習網</span></div>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

二、margin簡潔寫法

margin跟padding一樣,也有簡潔寫法。我們可以使用margin屬性來設置四個方向的外邊距。在實際編程中,我們往往使用的是margin的這種高效簡潔寫法來編程。

margin寫法有3種,分別如下:

語法:

 
    margin:像素值;
    margin:像素值1 像素值2;
    margin:像素值1 像素值2 像素值3 像素值4;

例如:

“margin:20px;”表示四個方向的外邊距都是20px;

“margin:20px 40px;”表示margin-top和margin-bottom為20px,margin-right和margin-left為40px。

“margin:20px 40px 60px 80px;”表示margin-top為20px,margin-right為40px,margin-bottom為60px,margin-left為80px。大家按照順時針方向記憶就可以了。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS外邊距margin屬性</title>
    <style type="text/css">
        #main
        {
            display:inline-block;/*將塊元素轉換為inline-block元素*/
            border:1px solid #CCCCCC;
        }
        .lvye
        {
            display:inline-block; /*將塊元素轉換為inline-block元素*/
            padding:20px;
            margin:40px 80px;
            border:1px solid red;
            background-color:#FCE9B8;
        }
        span{border:1px solid blue;background-color:#C5FCDF;}
    </style>
</head>
<body>
    <div id="main">
        <div class="lvye"><span> 學習網</span></div>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved