Ostatnio edytowany:

margin-left

Autor: Virtual Patriot

Opis właściwości margin-left

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

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

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

dziedziczenie

nie

wartość initial

0

wyjątki initial

hr, blockquote, dd, figure, fieldset

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości margin-left

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

rozmiar

Opis

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

Wartości ujemne

wartości ujemne tworzą ujemny lewy zewnętrzny margines elementu HTML (przesuwają do elementu HTML sąsiadującą treść znajdującą się obok lewej 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-left wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative (dla pozostałych typów pozycji należy dokładniej zapoznać się z poszczególnymi wartościami właściwości position)

Przykład

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

  <body>

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

  </body>
</html>

auto

Opis

Za pomocą wartości auto właściwości margin-left możemy sprawić, że przeglądarka internetowa sama określi rozmiar lewego 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 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

gdy do niepływającego elementu HTML typu block, list-item, table lub flex 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

Przykład

  margin-left:auto;
przeglądarka internetowa sama określiła rozmiar lewego zewnętrznego marginesu tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "margin-left" 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-left:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>