Atrybut padding Style

Definicja i użycie

Padding Atrybut ustawia lub zwraca wewnętrzny margines elementu.

Ta atrybut może przyjąć od jednej do czterech wartości:

Atrybut margines i Właściwość padding Wszędzie wokół elementu umieszczamy przestrzeń. Jednak różnica polega na tym, że margines wstawia przestrzeń wokół krawędzi, podczas gdy padding wstawia przestrzeń wewnątrz krawędzi elementu.

  • Jedna wartość, na przykład: div {padding: 50px} - wszystkie cztery boki będą miały wewnętrzny margines 50px
  • Dwa wartości, na przykład: div {padding: 50px 10px} - górne i dolne wewnętrzne marginesy będą wynosiły 50px, a lewe i prawe wewnętrzne marginesy będą wynosiły 10px
  • Trzy wartości, na przykład: div {padding: 50px 10px 20px} - górny margines wewnętrzny wynosi 50px, marginesy boczne wynoszą 10px, dolny margines wewnętrzny wynosi 20px
  • Cztery wartości, na przykład: div {padding: 50px 10px 20px 30px} - górny margines wewnętrzny wynosi 50px, prawy margines wewnętrzny wynosi 10px, dolny margines wewnętrzny wynosi 20px, lewy margines wewnętrzny wynosi 30px

Zobacz również:

Tutorial CSS:Wewnętrzna przestrzeń CSS

Podręcznik CSS:Właściwość padding

Przykład

Przykład 1

Ustawienie marginesu elementu <div>:

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

Spróbuj sam

Przykład 2

Zmiana wszystkich czterech krawędzi marginesu elementu <div> na "25px":

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

Spróbuj sam

Przykład 3

Zwrócenie wewnętrznego marginesu elementu <div>:

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

Spróbuj sam

Przykład 4

Różnica między właściwością margin a padding:

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

Spróbuj sam

Gramatyka

Zwrócenie właściwości padding:

object.style.padding

Ustawienie właściwości padding:

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

Wartość atrybutu

Wartość Opis
% Definiuje wewnętrzną margines jako procent szerokości elementu nadrzędnego.
length Definiuje wewnętrzną margines za pomocą jednostki długości.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegółowe informacje techniczne

Domyślna wartość: 0
Zwracana wartość: Ciąg znaków, który reprezentuje wewnętrzną margines elementu.
Wersja CSS: CSS1

Przeglądarka internetowa obsługuje

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie