Margin i Procent og Margin Collapse Eksempler

section med class="demo"

.demo, h1{
  background-color:#FFDA6A;
  margin:1%;
  padding:1%;
}

Browseren udregner 1% af container-boksens bredde
(her: #wrapper, med max-width 1000px).
Dvs. i dette eksempel, en margin på 10px...
...og bruger samme mål foroven og forneden: 10px på alle 4 sider.

section uden class

Brug Dev Tools til at se hvor margins for de forskellige sektioner faktisk ligger.

section med class="demo" - Margin Collapse eksempel 1 - en God Ting :)

Hvor der er 2 blokelementer med margin, som støder op mod hinanden, kollapser margin.
Dvs. at der vises kun 1 margin i stedet for 2.
Hvis de har forskellige margins, er det den største der vinder.

section med class="demo" - Margin Collapse eksempel 2 - en mindre god ting...

Man oplever ofte at margin på især H1 ikke opfører sig som forventet.

Margin-top og -bottom på det første og sidste blokelement vil normalt ligge udenfor #wrapper!! (eller tilsvarende). Man kan løse det ved at give #wrapper overflow:auto;.

Brug Dev Tools til at slukke for overflow:auto på #wrapper, så du kan se det her.