Autor publikacji: Virtual Patriot - Administrator

margin-bottom

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - margin-bottom property (CSS2 - LV2.2)

Przeznaczenie 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.

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

Informacje techniczne 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

dowolna

nie

0

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`

: tak
: tak
: tak
: tak
: tak
: tak

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

rozmiar

Wyjaśnienie

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

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

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:

oba wspomniane elementy HTML posiadają jeden z następujących typów: block, list-item, table, flex lub grid
żaden ze wspomnianych elementów HTML nie jest elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid
ż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 dolny zewnętrzny margines elementu HTML może wybiegać poza dolną granicę obszaru elementu przodka, lecz tylko wtedy, gdy:

w zawartości elementu przodka (w kodzie HTML), po elemencie HTML posiadającym dolny zewnętrzny margines, nie występuje żadna treść, która mogłaby temu zapobiec (inny element HTML lub tekst)
rozmiar dolnego wewnętrznego marginesu oraz rozmiar dolnego obramowania elementu przodka wynosi 0
element HTML posiadający dolny zewnętrzny margines jest typu block, list-item, table, flex lub grid
element HTML posiadający dolny zewnętrzny margines nie jest pływającym elementem HTML
element HTML posiadający dolny zewnętrzny margines nie posiada pozycji absolute lub pozycji fixed
element przodek jest typu block lub list-item
element przodek nie jest pływającym elementem HTML
element przodek nie posiada pozycji absolute lub pozycji fixed
element przodek posiada poziomy tryb zapisu treści
wartością właściwości overflow elementu przodka jest wartość visible

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

Wyjaśnienie

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).

Dla zaawansowanych

gdy do elementu HTML dodamy właściwość margin-top wraz z wartością auto oraz właściwość margin-bottom 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 blokowych najbliższego elementu przodka tworzącego blok treści, lecz tylko wtedy, gdy:

element HTML posiada pozycję static lub pozycję relative
element HTML jest elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid

gdy do elementu HTML dodamy właściwość margin-top wraz z wartością auto oraz właściwość margin-bottom 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 dolnej krawędzi blokowej najbliższego elementu przodka tworzącego blok treści, lecz tylko wtedy, gdy:

element HTML posiada pozycję static lub pozycję relative
element HTML jest elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid

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