margin的使用

Posted on Edited on In Views: Disqus:

 

一、說明

margin似乎大多人翻譯成邊界，而border為邊框，

但邊界我會搞混成border，所以我還是認為翻成邊距比較好。

值的形式可為auto、px、%、inherit，並且也可以是負值

範例為

<html>
<head>
    <style>
        p {
        }

            p.ex {
                background-color: red;
                margin: -25px auto -25px;
                width: 50%;
            }
    </style>
</head>
<body>
    <p>This is a paragraph with no specified margins.</p>
    <p class="ex">This is a paragraph with specified margins.</p>
    <p>This is a paragraph with no specified margins.</p>
</body>
</html>

1、可個別設定上下左右

例如：

margin-top:5px;

margin-bottom:5px;

margin-left:5px;

margin-right:5px;

而

-webkit-margin-before的作用相當於margin-top

-webkit-margin-after的作用相當於margin-bottom

-webkit-margin-start的作用相當於margin-left

-webkit-margin-end的作用相當於margin-right

 

2、margin shorthand property

例如：

margin:5px;表示會影響上下左右邊距

margin:5px 10px;    5px表示會影響上下邊距、10px表示會影響左右邊距

margin:5px 10px 15px;    5px表示會影響上邊距、10px表示會影響左右邊距、15px表示會影響下邊距

margin:5px 10px 15px 20px;    5px表示會影響上邊距、10px表示會影響右邊距、15px表示會影響下邊距、20px表示會影響左邊距(順時鐘)

 

另外CSS有一個padding屬性，其用法也是跟margin大同小異的，

唯一需注意的是padding與margin的Box Model模型關係

 

二、應用

margin的效果會隨著元素的不同而產生不一樣的效果。

1、div

<html>
<head>
    <style>
        div {
            border: 1px red solid;
            margin: 50px 50px 50px 50px;
        }
    </style>
</head>
<body>
    <div>
        aaa
    </div>
</body>
</html>

當元素是div時，注意margin-bottom是沒作用的。

 

<html>
<head>
    <style>
        div {
            border: 1px red solid;
            width: 300px;
            margin: auto auto auto auto;
        }
    </style>
</head>
<body>
    <div>
        aaa
    </div>
</body>
</html>

當無指定width時，margin:auto皆無作用；

當有指定width時，margin-top與margin-bottom無作用。

 

<html>
<head>
    <style>
        div {
            border: 1px red solid;
            width: 300px;
            margin: auto 50px auto auto;
        }
    </style>
</head>
<body>
    <div>
        aaa
    </div>
</body>
</html>

當有指定width時，margin-right有指定pixel，margin-left為auto時，

呈現會先做margin-right:50px，再做margin-left:auto來配合以指定值的margin-right。

最後值得注意的是如果div元素沒有特別設定float下，

當margin-left與margin-right和margin-top與margin-bottom的值互相衝突時，

則以margin-top與margin-left為主。