Style padding Property

Definition and usage

padding Property sets or returns the inner padding of the element.

This property can take one to four values:

margin property And Padding attribute All insert space around the element. However, the difference lies in that margin inserts space around the border, while padding inserts space inside the element's border.

  • One value, for example: div {padding: 50px} - All four sides will have 50px of inner margin
  • Two values, for example: div {padding: 50px 10px} - The top and bottom inner margins will be 50px, and the left and right inner margins will be 10px
  • Three values, for example: div {padding: 50px 10px 20px} - The top inner padding is 50px, the left and right inner padding is 10px, and the bottom inner padding is 20px
  • Four values, for example: div {padding: 50px 10px 20px 30px} - The top inner padding is 50px, the right inner padding is 10px, the bottom inner padding is 20px, and the left inner padding is 30px

See also:

CSS Tutorial:CSS Inner Padding

CSS Reference Manual:Padding attribute

Instance

Example 1

Set the inner padding of the <div> element:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Try it yourself

Example 2

Change all four sides of the <div> element's inner padding to "25px":

document.getElementById("myDiv").style.padding = "25px";

Try it yourself

Example 3

Return the inner padding of the <div> element:

alert(document.getElementById("myDiv").style.padding);

Try it yourself

Example 4

Difference between margin and padding properties:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Try it yourself

Syntax

Return padding attribute:

object.style.padding

Set padding attribute:

object.style.padding = "%|length|initial|inherit"

Attribute value

Value Description
% Define inner padding as a percentage of the parent element's width.
length Define inner padding with length units.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: 0
Return value: A string that represents the inner padding of an element.
CSS version: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support