Marginy

Zatímco padding tvoří vnitřní prostor elementu (mezi obsahem a okrajem), margin (česky vnější okraj nebo odsazení) je prostor kolem elementu, vně jeho okraje. Slouží k vytvoření mezery mezi dvěma elementy.

Představte si dva sousedící boxy. Pokud jednomu boxu dáte margin-bottom, vytvoříte pod ním mezeru, která odsadí následující box. Marginy se "hroutí" (collapsing margins), pokud se svislé marginy dvou elementů setkají, ten větší margin "pohltí" menší a výsledná mezera bude rovna té větší hodnotě. Horizontální marginy se nehroutí.

Ovládání Marginů

Můžete ovládat marginy pro každou stranu zvlášť nebo použít zkrácený zápis:

• Jednotlivé strany

  • margin-top: Horní okraj
  • margin-right: Pravý okraj
  • margin-bottom: Dolní okraj
  • margin-left: Levý okraj

  .prvek {
      margin-top: 20px;
      margin-left: 10px;
  }

• Zkrácený zápis margin

  Umožňuje nastavit všechny čtyři strany najednou:

  • margin: 10px; - Všechny strany 10px.
  • margin: 10px 20px; - Horní/dolní 10px, levá/pravá 20px.
  • margin: 10px 20px 30px; - Horní 10px, levá/pravá 20px, dolní 30px.
  • margin: 10px 20px 30px 40px; - Horní 10px, pravá 20px, dolní 30px, levá 40px (po směru hodinových ručiček odshora).

  .nadpis {
      margin: 40px auto 20px auto; /* Horní 40px, dolní 20px, auto pro horizontální centrování */
  }

Jednotky Marginů

Stejně jako u font-size můžete pro marginy používat různé jednotky:

• px (pixely): Pevná velikost.
• em: Relativní k velikosti písma elementu.
• rem: Relativní k velikosti písma kořenového elementu HTML.
• % (procenta): Relativní k šířce rodičovského elementu (pro horizontální marginy) nebo k výšce rodiče (pro vertikální marginy).
• auto: Speciální hodnota, která se používá pro horizontální centrování blokových elementů.

Centrování elementů pomocí margin: auto

Pro horizontální centrování blokového elementu (jako je div, p, h1 atd.), který má nastavenou pevnou šířku, můžete použít margin-left: auto; a margin-right: auto;, nebo zkráceně margin: 0 auto; (nulový vertikální margin, automatický horizontální margin).

.kontejner {
    width: 800px; /* Musí mít definovanou šířku */
    margin: 0 auto; /* Automaticky centruje horizontálně */
    background-color: #ecf0f1;
    padding: 20px;
}

Inspektor prohlížeče

Pro lepší vizualizaci box modelu (obsah, padding, border, margin) je nezbytné používat nástroje pro vývojáře v prohlížeči (např. F12 v Chrome/Firefox/Edge). Tyto nástroje vám umožní vidět, jak se jednotlivé mezery aplikují a jak ovlivňují rozložení.