Ostatnio edytowany:

margin-bottom

Autor: Virtual Patriot

Opis właściwości margin-bottom

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

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

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
  • h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, figure
  • ol (gdy element ol nie jest elementem potomkiem elementu ol, elementu ul lub elementu dl)
  • ul (gdy element ul nie jest elementem potomkiem elementu ul, elementu ol lub elementu dl)
  • dl (gdy element dl nie jest elementem potomkiem elementu dl, elementu ol lub elementu ul)
animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości margin-bottom

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

rozmiar

Opis

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

Wartości ujemne

wartości ujemne tworzą ujemny dolny zewnętrzny margines elementu HTML (przesuwają do elementu HTML sąsiadującą treść znajdującą się pod dolną krawędzią obszaru elementu HTML)

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości logicznej 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

Dla zaawansowanych

gdy dolny zewnętrzny margines elementu HTML przylega do górnego 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:

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

Przykład

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

  <body>

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

  </body>
</html>

auto

Opis

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

Przykład

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

  <body>

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

  </body>
</html>