CSS padding-top Property



CSS Tutorial  >  Padding  >  padding-top

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

  padding-top: [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-top is 0, and [value] can never be a negative number.

Example 1

#container1 {
  padding-top:20px;
  border: 1px solid 000000;
}

The following HTML

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

renders the following:

Example of CSS padding-top property using length

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

Example 2

#container2 {
  padding-top:18%;
  border: 1px solid 000000;
}

The following HTML

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

renders the following:

Example of CSS padding-top property using percentages

Notice the top padding the text and the top of the light green area is 18% of the width. The right, left, and bottom 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 Background




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