CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Padding

CSS padding properties are used to generate space around an element's content, inside of any defined borders.

This Paragraph has 80px padding

We have the following properties to set an element padding:

  • padding-top - specifies the top padding of an element
  • padding-right - specifies the right padding of an element
  • padding-bottom - specifies the bottom padding of an element
  • padding-left - specifies the left padding of an element
  • padding - specifies a shorthand property for setting all padding properties in one declaration

All the padding properties can have the following values:

  • length - specifies a padding in px, pt, cm, etc. See length units
  • % - specifies a padding in % of the width of the containing element
  • inherit - specifies that the padding should be inherited from the parent element

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.


Padding Top

The padding-top property sets the top padding (space) of an element:

Run code

Padding Right

The padding-right property sets the right padding (space) of an element:

Run code

Padding Bottom

The padding-bottom property sets the bottom padding (space) of an element:

Run code

Padding Left

The padding-left property sets the left padding (space) of an element:

Run code

Padding - Shorthand Property

It is possible to specify all the padding properties in one property.

The padding property is a shorthand that sets the following properties in a single declaration:

Run code

The padding property can have from one to four values:

  • When one value is specified, it applies the same padding to all four sides.
  • When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first padding applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the padding apply to the top, right, bottom, and left in that order (clockwise).

The inherit Value

The inherit value is used to inherit padding from the parent element:

Run code

Padding and Element Width

The width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 400px (300px + 50px of left padding + 50px of right padding):

Run code

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease:

Run code

You will learn more about box-sizing later in this tutorial.


CSS Padding properties

Property Description
padding A shorthand property for setting all padding properties in single declaration
padding-top Specifies the top padding of an element
padding-right Specifies the right padding of an element
padding-bottom Specifies the bottom padding of an element
padding-left Specifies the left padding of an element