Autor publikacji: Virtual Patriot - Administrator

margin

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - margin property (CSS2 - LV2.2)

Przeznaczenie właściwości `margin`

Za pomocą właściwości margin możemy określić rozmiar kilku różnych zewnętrznych marginesów interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `margin`

przeznaczenie: element HTML każdego typu, lecz nie element HTML typu table-header-group, table-row-group, table-footer-group, table-row, table-cell, table-column-group, table-column
pozycja: dowolna
dziedziczenie: nie
wartość initial: 0
wyjątki initial: body
animowanie: tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości margin

Interpretacja właściwości `margin`

: tak
: tak
: tak
: tak
: tak
: tak

Opis wartości właściwości `margin`

grupa wartości

Wyjaśnienie

Za pomocą właściwości margin oraz z góry zdefiniowanej grupy wartości możemy określić rozmiar kilku różnych zewnętrznych marginesów interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  margin:15px 30px 45px 60px;
}

/* REGUŁA - 2 */
div {
  margin-top:15px;
  margin-right:30px;
  margin-bottom:45px;
  margin-left:60px;
}

Składniki grupy wartości właściwości `margin`

            top right bottom left

Przykładowe zapisy

15px

15px 30px

15px 30px 45px

15px 30px 45px 60px

top: Składnik top jest wymaganym składnikiem grupy wartości właściwości margin. Składnik top określa wartość właściwości margin-top, czyli rozmiar górnego zewnętrznego marginesu interesującego nas elementu HTML.
right: Składnik right jest wymaganym składnikiem grupy wartości właściwości margin. Składnik right określa wartość właściwości margin-right, czyli rozmiar prawego zewnętrznego marginesu interesującego nas elementu HTML.
bottom: Składnik bottom jest wymaganym składnikiem grupy wartości właściwości margin. Składnik bottom określa wartość właściwości margin-bottom, czyli rozmiar dolnego zewnętrznego marginesu interesującego nas elementu HTML.
left: Składnik left jest wymaganym składnikiem grupy wartości właściwości margin. Składnik left określa wartość właściwości margin-left, czyli rozmiar lewego zewnętrznego marginesu interesującego nas elementu HTML.

Przykład

  margin:50px 100px;

rozmiar górnego oraz dolnego zewnętrznego marginesu tego elementu "div" wynosi 50 pikseli, natomiast rozmiar prawego oraz lewego zewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "margin" wraz z następującą grupą wartości: "50px 100px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        margin:50px 100px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar górnego oraz dolnego zewnętrznego marginesu tego elementu "div" wynosi 50 pikseli, natomiast rozmiar prawego oraz lewego zewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "margin" wraz z następującą grupą wartości: "50px 100px"
    </div>

  </body>
</html>