Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Podsumowanie

Własność margin określa marginesy elementu. Jest ona również sposobem na ustawienie wszystkich marginesów jednocześnie. Negatywne wartosci są dozwolone.

Wartość początkowaas each of the properties of the shorthand:
Stosowana doall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Dziedziczonano
Percentagesrefer to the width of the containing block
Mediavisual
Wartość wyliczonaas each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animatableyes, as a length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Składnia

margin: <length> {1,4} | <percentage> {1,4} | inherit | auto;

Wartości

<length>
przyjmuje konkretną odległość.
<percentage>
procentowa wartość szerokości zawierającego bloku
auto
przeglądarka obliczy i wybierze margines dla określonego elementu

Jeśli podano:

  • jedną wartosć, zostaje ona przypisana dla wszystkich stro.
  • dwie wartości, pierwsza odnosi się do: góra i dół, a druga do: prawo i lewo.
  • trzy wartości, pierwsza odnosi się do góra, druga do: prawo i lewo, a trzecia do: dół.
  • cztery wartości, kolejno odnoszą się do: góra, prawo, dół, lewo;

Przykłady

Zobacz przykład

  .content {
    margin: 5%;  /* wszystkie strony margines 5% */
  }

  .sidebox {
    margin: 10px;  /* wszystkie strony margines 10px */
  } 

  .rightbox {
    margin: 10px 20px;  /*  górny i dolny margines 10px */
  }                     /*  lewy i prawy margines 20px */


  .leftbox {               /*  górny margines 10px */
    margin: 10px 3% 20px;  /*  lewy i prawy margines 3% */
  }                        /*  dolny margines 20px */


  .mainbox {                    /*  górny margines 10px */
     margin: 10px 3px 30px 5px; /*  prawy margines 3px */
  }                             /*  dolny margines 30px */
                                /*  lewy margines 5px */ 

Specifications

Specification Status Comment
CSS Basic Box Model
The definition of 'margin' in that specification.
Working Draft No significant change
CSS Transitions
The definition of 'margin' in that specification.
Working Draft Defines margin as animatable.
CSS Level 2 (Revision 1)
The definition of 'margin' in that specification.
Recommendation Removes its effect on inline elements.
CSS Level 1
The definition of 'margin' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

Autorzy i etykiety dokumentu

 Autorzy tej strony: Terite, fscholz, teoli, yecril71pl, hADeSik, Wasiqs
 Ostatnia aktualizacja: Terite,