why is margin-top working for a div that is inside another div?

Question

I have one div box which is placed inside a bigger div box, margin-top is not able to be apply to the inner box why?

Answer 1

Francis Woli do you mean, margin-top isn't working on the first child element? If yes, then I think I know the solution.

Just write "overflow: auto;" in the css of the parent element, that's all. Here is the source from where I learned it.

https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work

Answer 2

margins are sometimes tricky to understand ^^

as far as I understand them until now, they apply globaly (meaning by spacing with content that are not necessarly inside the same parent), and they are kind of merged (bigger apply) with previous/next content opposite margin...

Answer 3

also setting a border to a parent (could?) act as a content... and so applying border:1px solid transparent to parent could solve your problem ^^

other way is to define padding to parent ;)