Search within TutorialsPark

CSS Padding


Use CSS padding to control the space in between the element and its border.


CSS Padding

1. The CSS padding property enables you to control the spacing in-between the element's content and its borders.

2. The difference between margin and padding is that padding sets the spacing between the content and it borders, while margin sets the space between the element's borders and other elements.

Demo: CSS Padding

It could probably be shown by facts and figures that there is no distinctly native criminal class except Congress.

padding:

Note: CSS padding is used to make the text more readable and mostly used along with margin property.

Properties of CSS Padding

Property Description Values
padding-top Defines the Padding for content's top edge
length(px, em, cm)
percentage(%)
padding-right Defines the Padding for content's right edge
length(px, em, cm)
percentage(%)
padding-bottom Defines the Padding for content's bottom edge length(px, em, cm)
percentage(%)
padding-left Defines the Padding for content's left edge length(px, em, cm)
percentage(%)
padding A shorthand to set padding for all the edges at once length(px, em, cm)
percentage(%)


CSS Padding: For Individual Egdes of Content

1.We can apply different amount of padding to individual edges of the content using CSS padding property.

2. The value for padding property can be specified as length(px, em or cm) , percentages(%) or a combination of both.

Example: CSS - Individual Padding

Give it a TRY! » Note: Incase there is no border, the effect will be similar to that using margin property.


CSS Padding: padding shorthand

1. By using the shorthand padding , you can set the padding of all the edges of the content at once in a single declaration.

2. The value set as the padding of the content can be the same for all the edges , different for all the edges or any other combination.

The padding can be specified in 4 different ways:

padding : 5px 10px 15px 20px (top, right, bottom, left ) i.e clockwise starting from top.

padding : 5px 10px 15px (top, right, bottom ) i.e clockwise starting from top.

padding : 5px 10px (top and bottom (5px), right and left(10px) ) i.e clockwise starting from top.

padding : 5px (all sides of content )

Example: CSS Padding Shorthand

Give it a TRY! » Note: In case you omit some values for shorthand, then the best match is applied.


Using Both Margins and Padding

1. Margins and Padding are mostly used together to allow a breathing space to the content, it also greatly improves the readabilty, and the overall layout and look of the Webpage.

Example:CSS Combining margin and padding

Give it a TRY! » Note: The white-space between the content and the other elements add to the design and neatness of the webpage .