Ostatnio edytowany:

margin-right

Autor: Virtual Patriot

Opis właściwości margin-right

Za pomocą właściwości margin-right możemy określić rozmiar prawego zewnętrznego marginesu interesującego nas elementu HTML.

Informacje dodatkowe

każda szerokość związana z właściwością margin-right tyczy się szerokości logicznej

Dodatkowe techniczne informacje o właściwości margin-right

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

hr, blockquote, figure, fieldset

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości margin-right

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości margin-right

rozmiar

Opis

Za pomocą właściwości margin-right oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar prawego zewnętrznego marginesu interesującego nas elementu HTML.

Wartości ujemne

wartości ujemne tworzą ujemny prawy zewnętrzny margines elementu HTML

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego powiązanego elementu przodka

wartości procentowe są różnie obliczane w różnych przeglądarkach internetowych dla elementów dzieci elementu HTML typu flex lub inline-flex oraz dla elementów HTML należących do siatki elementu HTML tworzącego układ siatki

Przykład

  margin-right:100px;
rozmiar prawego zewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "margin-right" wraz z wartością "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-right:100px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar prawego zewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "margin-right" wraz z wartością "100px"
    </div>

  </body>
</html>

auto

Opis

Za pomocą wartości auto właściwości margin-right możemy sprawić, że przeglądarka internetowa sama określi rozmiar prawego zewnętrznego marginesu interesującego nas elementu HTML (najczęściej rozmiarem tym jest rozmiar 0).

Dla zaawansowanych

gdy do elementu HTML dodamy właściwość margin-left wraz z wartością auto oraz właściwość margin-right wraz z wartością auto, wtedy element HTML może zostać wyśrodkowany w wolnej przestrzeni obszaru zawartości, do którego należy, względem krawędzi liniowych najbliższego elementu przodka tworzącego blok treści, lecz tylko wtedy, gdy:

gdy do elementu HTML dodamy właściwość margin-left wraz z wartością auto oraz właściwość margin-right wraz z wartością różną od wartości auto, wtedy element HTML może zostać przesunięty w wolnej przestrzeni obszaru zawartości, do którego należy, w kierunku prawej krawędzi liniowej najbliższego elementu przodka tworzącego blok treści, lecz tylko wtedy, gdy:

Przykład

  margin-right:auto;
przeglądarka internetowa sama określiła rozmiar prawego zewnętrznego marginesu tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "margin-right" wraz z wartością "auto"

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-right:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      przeglądarka internetowa sama określiła rozmiar prawego zewnętrznego marginesu tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "margin-right" wraz z wartością "auto"
    </div>

  </body>
</html>