Właściwość Style margin

Definicja i użycie

margin Właściwość ustawia lub zwraca marginesy elementu.

Ta właściwość może przyjąć od jednej do czterech wartości:

  • Jedna wartość, na przykład: div {margin: 50px} - Wszystkie cztery marginesy zewnętrzne wynoszą 50px
  • Dwie wartości, na przykład: div {margin: 50px 10px} - Górna i dolna marginesy zewnętrzne wynoszą 50px, lewa i prawa marginesy zewnętrzne wynoszą 10px
  • Trzy wartości, na przykład: div {margin: 50px 10px 20px} - Górna margines zewnętrzny wynosi 50px, lewa i prawa marginesy zewnętrzne wynoszą 10px, dolny margines zewnętrzny wynosi 20px
  • Cztery wartości, na przykład: div {margin: 50px 10px 20px 30px} - górny margines wynosi 50px, prawy margines wynosi 10px, dolny margines wynosi 20px, lewy margines wynosi 30px

Atrybuty margin i padding wstawiają przestrzeń wokół elementu. Jednak różnią się tym, że margin wstawia przestrzeń wokół krawędzi, a padding wstawia przestrzeń wewnątrz krawędzi elementu.

Zobacz również:

Tutorial CSS:Marginesy CSS

Podręcznik CSS:Atrybut margin

Przykład

Przykład 1

Ustaw wszystkie cztery marginesy elementu <div>:

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

Spróbuj sam

Przykład 2

Zmień wszystkie cztery marginesy elementu <div> na "25px":

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

Spróbuj sam

Przykład 3

Zwróć margines elementu <div>:

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

Spróbuj sam

Przykład 4

Różnica między atrybutem 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 atrybutu margin:

object.style.margin

Ustawienie atrybutu margin:

object.style.margin = "%|length|auto|initial|inherit"

Wartość atrybutu

Wartość Opis
% Definiuje marginesy jako procent szerokości elementu rodzicielskiego.
length Definiuje marginesy za pomocą jednostki długości.
auto Brower ustawia marginesy (wszystkie cztery marginesy będą równe).
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: 0
Wartość zwracana: Ciąg znaków, oznaczający margines zewnętrzny elementu.
Wersja CSS: CSS1

Obsługa przeglądarek

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