CSS外邊距屬性（margin）

93120 閱讀 0 評論 0 點贊

一、CSS外邊距屬性（margin）

屬性	描述
margin	簡寫屬性。在一個聲明中設置所有邊距屬性
margin-bottom	設置元素的下外邊距屬性
margin-left	設置元素的左外邊距屬性
margin-right	設置元素的右外邊距屬性
margin-top	設置元素的上外邊距屬性

CSS margin(外邊距)屬性定義元素周圍的空間。

margin 清除周圍的（外邊框）元素區(qū)域。margin 沒有背景顏色，是完全透明的。

margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。

CSS外邊距屬性

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

1. 使用像素值（px）設置外邊距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS簡單學習</title>
        <style type="text/css">
            p.nomargin {
                background-color: #FF0000
            }
            p.margin {
                background-color: #FF0000;
                margin-top: 100px;
                margin-bottom: 100px;
                margin-left: 80px;
                margin-right: 80px;
            }
        </style>
    </head>

    <body>
        <p>這是一個沒有指定邊距大小的段落</p>
        <p>這是一個指定過邊距大小的段落</p>
    </body>
</html>

運行結果：

使用像素值（px）設置外邊距

2. 使用margin簡寫屬性設置外邊距（厘米值cm、百分比值%）

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

實例:

（1）margin:10px 5px 15px 20px;

a.上邊距是 10px

b.右邊距是 5px

c.下邊距是 15px

d.左邊距是 20px

（2）margin:10px 5px 15px;

a.上邊距是 10px

b.右邊距和左邊距是 5px

c.下邊距是 15px

（3）margin:10px 5px;

a.上邊距和下邊距是 10px

b.右邊距和左邊距是 5px

（4）margin:10px;

a.所有四個邊距都是 10px

注意：負值是允許的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS簡單學習</title>
        <style type="text/css">
            p {
                background-color: aqua;
            }
            p.ex1 {
            margin: 2cm 5cm 3cm 5cm;
            }
            p.ex2 {
            margin: 20% 25% 30% 35%;
            }
        </style>
    </head>

    <body>
        <p>這是一個沒有指定邊距大小的段落</p>
        <p>這是一個使用&quot;厘米cm&quot;指定邊距大小的段落</p>
        <p>這是一個使用&quot;百分比值%&quot;指定邊距大小的段落</p>
    </body>
</html>

運行結果：

使用margin簡寫屬性設置外邊距