Home/ Questions/Q 8192493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T04:11:37+00:00

Possible Duplicate: CSS properties being passed up to the parent element when the DIV

  • 0

Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty

I’m a newbie for CSS layout design.

What I’d like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn’t behave the way I wanted.

Pls take the portion of script below for example:

[demo.html]

<html>
    <header>
        <title>Mock-up page</title>
        <link href="stylesheets/demo.css" rel="stylesheet"  type="text/css">

    </header>
    <body>
        <div id="box1">
            <div id="box2">div 2</div>
        </div>
    </body>
</html>

[demo.css]

#box1{
    width: 300px;
    height: 300px; 
    background-color:#0000FF;       
}

#box2{
    margin-top: 30px;
    background-color:#008000;
}

The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn’t what I had expected (right-sided in the picture).

enter image description here

What was the reason why this happened and how to correct the styling?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the margin-top to padding-top will do what you want.

    This is a know issue in many browsers.
    When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.

    Other solutions exists, but all of them are a bit hacky:

    • Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;

    • Create an element before the inner box with some content (&nbsp; can be used here) with height: 0; and overflow: hidden;;

    • Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;

    • and so on…

    • 0