CSS padding-right Property



CSS Tutorial  >  Padding  >  padding-right

The padding-right property in CSS is used to set the amount of padding added to the right of an element. It has the following syntax:

  padding-right: [value];

where [value] can be specified either in length or in percentages. When specified in percentages, it is the percentage of the width of the element. The default value for padding-right is 0, and [value] can never be a negative number.

Example 1

#container1 {
  padding-right:100px;
  border: 1px solid 000000;
}

The following HTML

<div id="container1">
Example of CSS padding-right property using length
</div>

renders the following:

Example of CSS padding-right property using length

Notice the right padding the text and the right of the light green area is 100px. The top, bottom, and left paddings are all 0.

Example 2

#container2 {
  padding-right:15%;
  border: 1px solid 000000;
}

The following HTML

<div id="container2">
Example of CSS padding-right property using percentages
</div>

renders the following:

Example of CSS padding-right property using percentages

Notice the right padding the text and the right of the light green area is 15% of the width. The top, bottom, and left paddings are all 0.

List of padding properties

PropertyUsage
paddingSpecifies the amount of padding on all four sides of an element
padding-bottomSpecifies the bottom padding of an element
padding-leftSpecifies the left padding of an element
padding-rightSpecifies the right padding of an element
padding-topSpecifies the top padding of an element

Next: CSS padding-top Property




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact