Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

CSS Padding


CSS Padding property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.

CSS Padding Properties

Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.

CSS Padding Values

Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.

CSS Padding Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.     background-color: pink;
  7. }
  8. p.padding {
  9.     padding-top: 50px;
  10.     padding-right: 100px;
  11.     padding-bottom: 150px;
  12.     padding-left: 200px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p>This is a paragraph with no specified padding.</p>
  18. <p class=“padding”>This is a paragraph with specified paddings.</p>
  19. </body>
  20. </html>

Output:

This is a paragraph with no specified padding.

This is a paragraph with specified paddings.

Comments

comments