1. Home

HTML DOM Style padding Property

Set the padding of a <div> element

Definition and Usage

The padding property sets or returns the padding of an element.

This property can take from one to four values:

Both the margin property and the padding property insert space around an element. However, the difference is that margin inserts the space around the border, while padding inserts the space within the border of an element.

  • One value, like: div {padding: 50px} - all four sides will have a padding of 50px
  • Two values, like: div {padding: 50px 10px} - the top and bottom padding will be 50px, left and right padding will be 10px
  • Three values, like: div {padding: 50px 10px 20px} - the top padding will be 50px, left and right padding will be 10px, bottom padding will be 20px
  • Four values, like: div {padding: 50px 10px 20px 30px} - the top padding will be 50px, right padding will be 10px, bottom padding will be 20px, left padding will be 30px

    • Browser Support

    Property
    padding Yes Yes Yes Yes Yes

    Syntax

    Return the padding property:

    object.style.padding

    Set the padding property:

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

    Property Values

    Value Description
    % Defines the padding in % of the width of the parent element
    length Defines the padding in length units
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    Technical Details

    Default Value: 0
    Return Value: A String, representing the padding of an element
    CSS Version CSS1

    More Examples

    Example

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

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

    Example

    Return the padding of a <div> element:

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

    Example

    Difference between the margin property and the padding property:

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

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

    Related Pages

    CSS tutorial: CSS Padding

    CSS reference: padding property

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US