Style padding-egenskap

Definition och användning

padding Egenskapen ställer in eller returnerar elementets inramning.

Denna egenskap kan använda en till fyra värden:

margin-attributet Och Padding-attribut Allt skapar utrymme runt elementet. Men skillnaden är att margin lägger ut utrymme runt ramen, medan padding lägger ut utrymme inom elementets ram

  • Ett värde, till exempel: div {padding: 50px} - alla fyra sidor kommer att ha en inramning på 50px
  • Två värden, till exempel: div {padding: 50px 10px} - övre och nedre inramning kommer att vara 50px, vänster och höger inramning kommer att vara 10px
  • Tre värden, till exempel: div {padding: 50px 10px 20px} - Övre inre marginal är 50px, högra och vänstra inre marginaler är 10px, nedre inre marginal är 20px
  • Fyra värden, till exempel: div {padding: 50px 10px 20px 30px} - Övre inre marginal är 50px, högra inre marginal är 10px, nedre inre marginal är 20px, vänstra inre marginal är 30px

Se också:

CSS-tutorial:CSS inre kant

CSS-referenshandbok:Padding-attribut

Exempel

Exempel 1

Ställ in inre marginaler för <div>-elementet:

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

Prova själv

Exempel 2

Ändra alla fyra sidors inre marginaler på <div>-elementet till "25px":

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

Prova själv

Exempel 3

Returnera <div>-elementets inre marginaler:

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

Prova själv

Exempel 4

Skillnaden mellan margin- och padding-attribut:

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

Prova själv

Syntax

Returnera padding-attribut:

object.style.padding

Ställ in padding-attribut:

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

Attributvärde

Värde Beskrivning
% Definiera inre marginaler som en procentandel av föräldrelementets bredd.
length Definiera inre marginaler med längdenheter.
initial Sätt detta attribut till dess standardvärde. Se initial。
inherit Följer detta attribut från föräldrelementet. Se inherit。

Tekniska detaljer

Standardvärde: 0
Returvärde: en sträng som anger elementets inre marginaler.
CSS-version: CSS1

Webbläsare stödjer

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd