Home/ Questions/Q 1044311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T15:48:28+00:00

could someone answer me, WHY when I set a margin-top to my <div id=logo>

  • 0

could someone answer me, WHY when I set a margin-top to my <div id="logo">, all the others divs are pushed down. And why if a set float:left to my <div id="logo">, everything works fine.

Code:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Olá Mundo!</title>
    <style>
      /* CSS RESET HERE */ ( http://html5doctor.com/html-5-reset-stylesheet/ )
      body { margin:0; }
      #container { width:1000px; min-height:100%; height:auto; margin:0 auto; }
      #header { width:100%; height:160px; background-color:#FF0; }
      #logo { width:150px; height:150px; margin:10px 0 0 10px; background-color:#F0F; }
    </style>
  </head>
  <body>

    <div id="container">
      <div id="header">

        <div id="logo">
          <h1>Minha logo!</h1>
          <h2>meu slogan ...</h2>
        </div>

      </div>

  </body>  
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s caused by margin collapse.

    Normal Document Flow

    In the case where <div id="logo"> is not floated, its top margin is actually sticking out of the top of its containing element, which pushes everything down. The reason for this behavior (as the article above points out) is so that if you have a series of paragraphs with the following CSS:

    p {
   margin: 1em 0;
}

    They will only have 1em of margin between them, instead of 2em (which would be the result if margins didn’t collapse).

    Float Fix

    When you float <div id="logo"> it takes it out of the normal document flow, which means its top margin no longer collapses with its parent’s margin.

    Fixes

    Other options to fix margin collapse in your case would be to add 1px of top/bottom padding or a border to your <div id="header">.

    • 0