Style padding egenskab

Definition og brug

padding Egenskaben indstiller eller returnerer elementets indvendige kant.

Denne egenskab kan tage mellem én og fire værdier:

margin-egenskab og padding property Indsætter plads omkring elementet. Men forskellen er, at margin indsætter plads omkring kanterne, mens padding indsætter plads inde i elementets kanter.

  • En værdi, f.eks.: div {padding: 50px} - alle fire kanter vil have en indvendig kant af 50px
  • To værdier, f.eks.: div {padding: 50px 10px} - øverste og nedre indvendige margener vil være 50px, venstre og højre indvendige margener vil være 10px
  • Three values, for example: div {padding: 50px 10px 20px} - top inner padding is 50px, left and right inner padding is 10px, bottom inner padding is 20px
  • Four values, for example: div {padding: 50px 10px 20px 30px} - top inner padding is 50px, right inner padding is 10px, bottom inner padding is 20px, left inner padding is 30px

See also:

CSS tutorial:CSS indpadding

CSS reference manual:padding property

Example

Example 1

Set padding of <div> element:

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

Try it yourself

Example 2

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

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

Try it yourself

Example 3

Returns the 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 property:

object.style.padding

Set padding property:

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

Attribute value

Value Description
% Padding is defined as a percentage of the parent element's width.
length Padding is defined with length units.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

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

browser supports

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