div margin

Question

when i create a div"inner" inside another div"outer"
the inner div can't get margin top.. what is the error ?

Answer 1

In your .in you have

margin:20px auto;

Remove the word 'auto' as it looks like it's confusing it.

Then set the 'position' to 'relative' for .out and 'absolute' for .in.

I won't attempt to explain positioning as I'm still learning it myself, but here's a handy reference:

https://www.w3schools.com/css/css_positioning.asp

Answer 2

Abutted margins share (overlap), so e.g.: the bottom margin of one element would merge with the top margin of another.

If that's not helpful, can you link your code (CodePlayground)?

Answer 3

Another tip, whilst developing, it can be a good idea to turn on borders and color your div's differently. It will really help you visualise your layout.

Answer 4

thanks all for replying I have fixed it

Answer 5

Use padding from the outer <div> element instead. Good answer @Kirk

Answer 6

https://code.sololearn.com/WuFPvCB7kQY5/?ref=app
this is the code