Autor publikacji
Virtual Patriot - Administrator

margin

Data publikacji
Ostatnio edytowano

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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

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

Ważne

wartości właściwości margin możemy podawać według zasady formuły czterech wartości, dlatego tak naprawdę wymaganym składnikiem grupy wartości właściwości margin jest tylko jeden składnik

podana przez nas grupa wartości właściwości margin nie może zawierać wartości globalnych

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.

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>