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.

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

przeznaczenie
dziedziczenie
  • nie
wartość initial
  • 0
wyjątki initial
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 (przesuwają do elementu HTML sąsiadującą treść znajdującą się obok prawej krawędzi obszaru elementu HTML)

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści

Dla zaawansowanych

zasada dotycząca najbliższego elementu przodka tworzącego blok treści jest prawdziwa tylko wtedy, gdy element HTML, do którego chcemy dodać właściwość margin-right wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative (dla pozostałych typów pozycji należy zapoznać się dokładniej z poszczególnymi wartościami właściwości position)

wartości procentowe tak naprawdę liczone są względem aktualnego rozmiaru szerokości logicznej

gdy prawy zewnętrzny margines elementu HTML przylega do lewego zewnętrznego marginesu innego elementu HTML, wtedy wspomniane zewnętrzne marginesy obu elementów HTML załamują się między sobą, a oba elementy HTML dzieli przestrzeń o rozmiarze największego zewnętrznego marginesu (jeżeli oba zewnętrzne marginesy były dodatnie) lub o rozmiarze najmniejszego zewnętrznego marginesu (jeżeli oba zewnętrzne marginesy były ujemne) lub o rozmiarze wynikającym z różnicy pomiędzy wspomnianymi zewnętrznymi marginesami (jeżeli jeden z zewnętrznych marginesów był większy albo równy zeru, a drugi z zewnętrznych marginesów był mniejszy albo równy zeru), lecz tylko wtedy, gdy:

  • oba wspomniane elementy HTML posiadają jeden z następujących typów: block, list-item, table lub flex
  • żaden ze wspomnianych elementów HTML nie jest elementem dzieckiem elementu HTML typu flex lub elementu HTML typu inline-flex
  • oba wspomniane elementy HTML należą do zawartości elementu HTML, który posiada pionowy tryb zapisu treści
  • żaden ze wspomnianych elementów HTML nie jest pływającym elementem HTML
  • żaden ze wspomnianych elementów HTML nie posiada pozycji absolute lub pozycji fixed

ponadto prawy zewnętrzny margines elementu HTML może wybiegać poza prawą granicę obszaru elementu przodka, lecz tylko wtedy, gdy:

Przykład

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:#AFF;
      }
    </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 niepływającego elementu HTML typu block, list-item, table lub flex posiadającego poziomy tryb zapisu treści oraz posiadającego pozycję static lub pozycję relative dodamy właściwość margin-left wraz z wartością auto oraz właściwość margin-right wraz z wartością auto, wtedy taki element HTML zostanie wyśrodkowany względem lewej oraz prawej krawędzi obszaru zawartości najbliższego elementu przodka tworzącego blok treści, lecz tylko wtedy, gdy wspomniany element przodek również posiada poziomy tryb zapisu treści

gdy do niepływającego elementu HTML typu block, list-item, table lub flex posiadającego poziomy tryb zapisu treści oraz posiadającego pozycję static lub pozycję relative 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 taki element HTML zostanie przesunięty w kierunku prawej krawędzi obszaru zawartości najbliższego elementu przodka tworzącego blok treści, lecz tylko wtedy, gdy wspomniany element przodek również posiada poziomy tryb zapisu treści

Przykład

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:#AFF;
      }
    </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>