Collapsing header margin

Collapsing margin-top probleem

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! Dit kan op een aantal manier opgelost worden:

  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.