padding
Shorthand property for padding-top
, padding-bottom
, padding-left
and padding-right
that sets the space between the content and margin of an element or for each side individually.
Syntax
padding: <value>;
where <value>
can be one of the following:
- Length:
20px
- Percentage:
5%
Note: Providing one value will effect the padding of all four borders. Providing two values will result in the first value setting the padding of top and bottom and the second value setting the padding of left and right sides. Three values will result in the first value applied to the top, the second value to the left and right, and the third value applied to the bottom. Four values will apply to top, right, bottom and left.
Example 1
Set the padding on all sides to 20px
:
h1 {border: 2px solid green;padding: 20px;}
Example 2
Set the top and bottom padding to be 4px
and left and right to 2px
:
h1 {border-color: green;border-style: dashed;padding: 4px 2px;}
Example 3
Set the top padding to 10px
, right and left to 20px
and bottom to 5px
:
h1 {border-color: green;border-style: dashed;padding: 10px 20px 5px;}
Example 4
Set the top padding to 10px
, right to 15px
, left to 20px
and bottom to 5px
:
h1 {border-color: green;border-style: dashed;padding: 10px 15px 20px 5px;}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours