CSS padding

CSS padding property id used to create space around the content of an HTML element. Padding can be set to any side of an element by using the following properties.

CSS padding

CSS padding property id used to create space around the content of an HTML element. Padding can be set to any side of an element by using the following properties.

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

The padding of an element can be specified in px, cm, mm or %. If you specify padding for an element, the total width of the element will be padding + specified width of the element.

margin-top:2px;

margin-bottom:3cm;

Example

<html>
<head>
    <title>CSS Padding<title>
    <style>
        h2{
            padding-top:2cm;
            padding-left:1cm;
            padding: 1px solid green;
           }
    <style>
</head>
<body>
    <h2>CSS Padding</h2>
</body>
</html>

CSS Padding

Shorthand property

Instead of specifying the four padding properties as separate properties, you can specify them as a single property called padding.

Example

padding: 10px 12px 15px 8px;

This is same as:

padding-top:10px;
padding-right:12px;
padding-bottom:15px;
padding-left:8px;

Specifying values

MethodDescription
padding: 2px;This will set:
padding -top:2px;
padding -right:2px; 
padding -bottom:2px; 
padding -left:2px; 
padding: 1px 2px;This will set:
padding -top:1px;
padding -right:2px; 
padding -bottom:1px; 
padding -left:2px;

padding : 1px 2px 3px;
This will set:
padding -top:1px;
padding -left:2px;  

padding -right:2px; 
padding -bottom:3px; 

Share Tweet Send
Loading...