Applying Padding to an Element

Padding adds space between an element's contents and its border.

The padding properties are listed in the following table:

PropertyDescriptionValues
padding-toptop padding <length> or <%>
padding-rightright padding <length> or <%>
padding-bottombottom padding <length> or <%>
padding-leftleft padding <length> or <%>
paddingThis shorthand property sets the padding for all edges. <length> or <%>

The padding percentage values is always derived from the width of the containing block.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            background-color: lightgray; 
            padding-top: 0.5em; 
            padding-bottom: 0.3em; 
            padding-right: 0.8em; 
            padding-left: 0.6em; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo

The padding shorthand property sets the padding for all four edges. If four values are provided, they are used to for the top, right, bottom, and left, respectively.

If the left value is omitted, it is the same as the right; If the bottom value is omitted, it is the same as the top. If only one value is provided, then all four edges use that value.

The following CSS uses all four values to set the padding:

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px solid black; 
            background: lightgray; 
            border-radius: 1em 4em 1em 4em; 
            padding: 5px 25px 5px 40px; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo

The following CSS only use only value:

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px solid black; 
            background: lightgray; 
            border-radius: 1em 4em 1em 4em; 
            padding: 5px; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>

With the padding, you can add sufficient space between the content and the border.

Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Related: