Why is this div margin-top not working as expected?

Question

I'm using Firefox 8.0.1

margin-top is not working as expected, can anyone help? thx.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
          <title>New Border</title>

          <style type="text/css">
               #page {
                    width:980px;
                    margin: 50px auto;
               }

               #board {
                    width:600px;
                    height:400px;
                    background-color: gray;
               }

               .cell {
                    border: 1px solid;
                    width:50px;
                    height:20px;
                    margin: 30px 5px;
               } 
          </style>
     </head>
     <body>
          <div id="page">
               <div id="board">
                    <div class="cell">
                    </div>
               </div>
          </div>
     </body>
</html>

So, margin-top in the cell div is not working as expected.
I thought it should be margin-left, to place the cell div under the board div, but it's not.

This is the screenshot: enter image description here

i find this works; adding either padding-top or border-top to the board element will make it work http://www.blog.highub.com/css/css-hacks/css-firefox-top-margin-extra-space/ — hetaoblog, Feb 10 '12 at 08:11
this is called collapsing Margin check this http://www.w3.org/TR/CSS21/box.html#collapsing-margins , http://reference.sitepoint.com/css/collapsingmargins — sandeep, Feb 10 '12 at 09:49

score 7 · Accepted Answer · answered Feb 10 '12 at 08:09

7

You can add

overflow:hidden;

or

border:1px solid rgba(0,0,0,0); /*or*/ border:1px solid transparent;

To #board css.

See http://jsfiddle.net/3QfWS/

answered Feb 10 '12 at 08:09

XCS

27,244
26
101
151

1

thx, can you talk about the reason behind it? – hetaoblog Feb 10 '12 at 08:14
Well, I don't really know why the div exceeds it's container. This happened to me pretty often, and I guess that by adding a border or using overflow:hidden helps the browser understand that the nested div should not exceed it's container. – XCS Feb 10 '12 at 08:17
2

@hetaoblog The reason is http://www.w3.org/TR/CSS21/box.html#collapsing-margins – Boris Zbarsky Feb 10 '12 at 17:30

score 0 · Answer 2 · answered Sep 15 '14 at 10:19

0

I added the "clearfix" class to the parent element which solved the problem for me.

answered Sep 15 '14 at 10:19

DynamicDan

425
4
12

score -1 · Answer 3 · answered Feb 10 '12 at 08:05

-1

You've nested cell in board div. Put it outside if you want it below.

answered Feb 10 '12 at 08:05

simonmorley

2,810
4
30
61

well, I mean, the margin-top is set as 30px, but it's not showing that there's 30px margin-top, right? so why is that? – hetaoblog Feb 10 '12 at 08:09
Not sure why I get a mark down for that answer. Was not clear on your question. If you want it in that div, you could try adding some padding. – simonmorley Feb 10 '12 at 08:15
well, i did not do the 'mark down'... – hetaoblog Feb 10 '12 at 08:16
I know you didn't. Have you tried padding? Or the overflow suggestion above. Should work. – simonmorley Feb 10 '12 at 08:17
yes, add padding-top or border-top will make it work. thx. – hetaoblog Feb 13 '12 at 02:27

Why is this div margin-top not working as expected?

3 Answers3