用CSS填充

红太狼 2023-03-05 09:38 7阅读 0赞

The **padding property sets the padding space on all sides of an element**. The padding area is the space between the content of the element and its border. **Negative values are not allowed**.

**padding属性在元素的所有面上设置填充空间** 。 填充区域是元素内容与其边界之间的空间。 **不允许使用负值** 。

![padding in CSS][]

**Syntax:**

**句法：**

element_name
        {
            padding: length|initial|inherit;
        }

### 填充速记 **(**Padding Shorthand**)** ###

To add **padding** to each side individually (using padding-top, padding-left, etc) can you write it as a shorthand, as below:

要分别向每侧添加**填充** (使用padding-top ， padding-left等)，可以将其写为速记，如下所示：

**Example (Four values):**

**示例(四个值)：**

<!DOCTYPE html>
    
    <head>
        <style>
            .myDiv {
        
                /* top right bottom left; */
                padding: 25px 50px 75px 100px;
                /*background color*/
                background-color: #006969;
                /*text color*/
                color: #ffffff;
                /*width*/
                width: 300px;
            }
        </style>
    </head>
    <html>
    
    <body>
    <p class="myDiv">
    This site is specially designed to provide help to students, 
    working professionals and job seekers. We are fully dedicated to make each 
    tutorial very simple to learn and understand. This site is not created for business purpose, 
    but for spreading education about programming languages and to help the concerned learners 
    out who are enthusiastic to learn new technologies.</p>
    </body>
    
    </html>

**Output**

**输出量**

![Example of CSS padding][]

Here the padding is done is all directions with different value in each direction.

此处，对所有方向进行填充，每个方向上的值均不同。

**Example (Three values):**

**示例(三个值)：**

.myDiv
        {
            /* top left/right bottom */ 
            padding: 25px 50px 75px; 
        }

**Example (Two values):**

**示例(两个值)：**

.myDiv 
        {
            /* top/bottom left/right */
            padding: 25px 50px; 
        }

**Example (One value):**

**示例(一个值)：**

.myDiv {
            /* top/right/bottom/left */
            padding: 25px; 
        }

Here the padding is done in all four directions with same value.

此处，在所有四个方向上使用相同的值进行填充。

### 给定边上的填充 **(**Padding on a given side **)** ###

You can specify a side individually,

您可以单独指定一面，

*  Padding-top
    
    顶部填充
 *  Padding-right
    
    向右填充
 *  Padding-bottom
    
    底部填充
 *  Padding-left
    
    向左填充

**Example:**

**例：**

<!DOCTYPE html>
    
    <head>
        <style>
            .myDiv {
        
                padding-right: 25px;/* right ; */
                /*background color*/
                background-color: #006969;
                /*text color*/
                color: #ffffff;
                /*width*/
                width: 300px;
            }
        </style>
    </head>
    <html>
    
    <body>
    <p class="myDiv">
    This site is specially designed to provide help to students, 
    working professionals and job seekers. We are fully dedicated to make each 
    tutorial very simple to learn and understand. This site is not created for business purpose, 
    but for spreading education about programming languages and to help the concerned learners 
    out who are enthusiastic to learn new technologies.</p>
    </body>
    
    </html>

**Output**

**输出量**

![Example of CSS padding][Example of CSS padding 1]

The above code would add a padding of 25px to the right of the paragraph.

上面的代码将在该段落的右侧添加25px的填充。

> 翻译自: [https://www.includehelp.com/code-snippets/padding-in-css.aspx][https_www.includehelp.com_code-snippets_padding-in-css.aspx]

[padding in CSS]: /images/20230208/3053f643cabf4847b7012d3e32198031.png
[Example of CSS padding]: https://www.includehelp.com/code-snippets/Images/css-padding-1.jpg
[Example of CSS padding 1]: /images/20230208/e18875eca78841cdad3ff80428e082d1.png
[https_www.includehelp.com_code-snippets_padding-in-css.aspx]: https://www.includehelp.com/code-snippets/padding-in-css.aspx