margin

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
Animation typea 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

  .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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
marginChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
autoChrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes The auto value is not supported in quirks mode.
Firefox Full support 1IE Full support 6
Notes
Full support 6
Notes
Notes The auto value is not supported in quirks mode.
Opera Full support 3.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.