DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 11.4 內邊距padding
11.4 內邊距padding
編輯:CSS基礎知識     

內邊距padding,又常常稱為“補白”,它指的是內容區到邊框之間的那一部分。

一、padding 局部樣式

從CSS盒子模型中,我們可以看出,內邊距padding分為四個方向的內邊距:padding-top、padding-right、padding-bottom、padding-left。

語法:

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

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS內邊距padding屬性</title>
    <style type="text/css">
        #main
        {
            display:inline-block;/*將塊元素轉換為inline-block元素*/
            border:1px solid #CCCCCC;
        }
        .lvye
        {
            display:inline-block; /*將塊元素轉換為inline-block元素*/
            padding-top:20px;
            padding-right:40px;
            padding-bottom:60px;
            padding-left:80px;
            margin:40px;
            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>

在浏覽器預覽效果如下:

二、padding簡潔寫法

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

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

語法:

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

例如:

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

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

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

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS內邊距padding屬性</title>
    <style type="text/css">
        #main
        {
            display:inline-block;/*將塊元素轉換為inline-block元素*/
            border:1px solid #CCCCCC;
        }
        .lvye
        {
            display:inline-block; /*將塊元素轉換為inline-block元素*/
            padding:40px 80px;
            margin:40px;
            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