CSS Padding

CSS Padding

The CSS Padding property defines the space between the element's border and its content.


Padding

When the element's Padding (padding) is cleared, the "padding" is released " area will be filled with the element's background color.

Use the fill attribute alone to change the top, bottom, left, and right padding. The abbreviation fill attribute can also be used, once changed everything changes.

The value of the Padding property is in pixels px, cm, percentage %


CSS padding property

PropertiesDescription
paddingUse abbreviated properties to set all padding properties in a declaration
padding-bottomSet the bottom padding of the element
padding-leftSet the left padding of the element
padding-rightSet the right padding of the element
padding-topSet the element's right padding Top padding

In CSS, it is possible to specify different padding for different sides:

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.padding
        {
            padding-top:25px;
            padding-bottom:25px;
            padding-right:50px;
            padding-left:50px;
        }
    </style>
</head>

<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>

</html>

Run the program to try it out


Padding - shorthand attribute

To shorten the code, it is possible to specify all the padding properties in one attribute.

This is the so-called abbreviation attribute. The abbreviation for all padding properties is "padding":

Padding property, which can have one to four values.

padding:25px 50px 75px 100px;

The top padding is 25px

The right padding is 50px

The bottom padding is 75px

The left padding is 100px


padding:25px 50px 75px;

The top padding is 25px

The left and right padding is 50px

The bottom padding is 50px 75px


padding:25px 50px;

top and bottom padding is 25px

left and right padding is 50px


padding:25px ;

All padding is 25px


Example

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.padding
        {
            padding:25px 50px;
        }
    </style>
</head>

<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>

</html>

Run the program to try it


Example

Demonstrates the use of abbreviated attributes to set all populated properties in a declaration, which can have one to four values.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.ex1 {padding:2cm;}
        p.ex2 {padding:0.5cm 3cm;}
    </style>
</head>

<body>
<p class="ex1">这个文本填充两边相等。填充每边2厘米。</p>
<p class="ex2">这个文本填充两边相等。填充每边2厘米。</p>
</body>
</html>

Run the program and try it




#
Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p.ex1 {padding:2cm;} p.ex2 {padding:0.5cm 3cm;} </style> </head> <body> <p class="ex1">这个文本填充两边相等。填充每边2厘米。</p> <p class="ex2">这个文本填充两边相等。填充每边2厘米。</p> </body> </html>
submitReset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!