Collapsing margin-top

Je kent het wellicht wel: je hebt een container gemaakt met daarin een header. De header heeft een aantal pixels margin-top maar tot je verbazing wordt deze margin-top toegekend aan de container en niet aan de header!

Opdracht

Probeer de drie onderstaande methodes uit:

  1. Geef padding aan het parent element
  2. Geef het element een border (evt in dezelfde kleur als de achtergrondkleur van de parent)
  3. Geef de parent ‘overflow:hidden’ maar zorg er dan wel voor dat de hoogte niet is ingesteld want anders zal je content bij een bepaalde hoogte niet meer getoond worden.

 

Theorie

https://css-tricks.com/what-you-should-know-about-collapsing-margins/