CSS基礎教學之內邊距與外邊距屬性

CSS內邊距屬性：邊框線到內容間的距離

註：平常我們所說的width和height屬性，它們指內容的寬度和高度，不含內、外邊距、邊框線。

padding-left：左內填滿距離，左邊線到內容間的距離。
padding-right：右內填滿距離，右邊線到內容間的距離。
padding-top：上內填滿距離，上邊線到內容間的距離。
padding-bottom：下內填滿距離，下邊線到內容間的距離。
縮寫形式

padding:10px; //四邊的內填分別為10px
padding:10px 20px; //上下為10px，左右為20px
padding:5px 10px 20px; //上為5px，左右為10px ，下為20px
padding:5px 10px 15px 20px; //順序一定是「上右下左」

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    .box{
        border:1px solid red;
        background-color:#f0f0f0;
        width:300px;
        padding:20px;
    } 
    </style>
    </head>
    <body>
        <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

#CSS外邊距屬性：邊線往外的距離

##margin- left：左邊線往外的距離。
margin-right：右邊線往外的距離
#margin-top：上邊線往外的距離。
margin-bottom：下邊線往外的距離。
縮寫形式

#margin:10px; //四個外邊距分別為10px
margin:10px 20px //上下外邊距10px，左右外邊距20px
margin:5px 10px 15px; //上外邊距5px，左右外邊距10px，下外邊距15px
margin:5px 10px 15px 20px; //順序一定是「上右下左」

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    .box{
        border:1px solid red;
        background-color:#f0f0f0;
        width:300px;
        margin:20px;
    } 
    </style>
    </head>
    <body>
        <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

註：padding和margin容易混淆，請大家仔細觀察兩個例子在輸出上的差異

繼續學習

新建檔案

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box{ border:1px solid red; background-color:#f0f0f0; width:300px; padding:20px; } </style> </head> <body> <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。 </div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear