用CSS填充

最新推荐文章于 2023-10-08 20:03:48 发布

cumubi7552

最新推荐文章于 2023-10-08 20:03:48 发布

阅读量245

点赞数

文章标签： css python css3 js html ViewUI

原文链接：https://www.includehelp.com/code-snippets/padding-in-css.aspx

版权

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属性在元素的所有面上设置填充空间 。填充区域是元素内容与其边界之间的空间。 不允许使用负值 。

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

输出量

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

输出量