Home/ Questions/Q 8434863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T06:46:26+00:00

I have a simple child div nested inside a parent div, like so… I

  • 0

I have a simple child div nested inside a parent div, like so…

I am trying to understand why I cannot move the child div down (ex. 25px), in relation to the parent div, by using margin-top: 25px, unless I give the parent div a border. I am thinking that the child div is using the border as a reference point, which is why the margin-top actually works once the border is applied. That is all fine and dandy, but in the specific example I’m working on, the parent div has a background image, and I don’t want to give it a border. But without a border, the child div won’t move! 

<body>

  <div id="main">

      <div id="child">
      </div>

 </div> 

</body

#main {width: 500px;
   border: 1px solid black;
   height: 500px;
   background-color: red;
   margin: auto;
   margin-top: 200px;
   }

#child {width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    top: 5px;
   }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I had this issue few days ago , I resolved it by adding a small padding (1px) to the parent div , and then use margin on the child div.

    • 0