孩子的边距不尊重父 div

Question

I have made a div that encloses another div inside it. Following is the JSX code for it.

<div className="header-container">
  <div className="title">
    Make a List
  </div>
<div>

Following is the CSS

.header-container{
  height: 50px;
  width: 100%;
  background-color: black;
 }



.title{
   color: white;
   margin: 20px;
 }

Following is the result

Why is the black div moving down after applying a margin to the inside div? The margin should be from the parent div but it's not following that?

Answer 1

That's just how margins work - if your child has a margin so large that it reaches outside the parent, it will "push" the parent away from the top.

Give the parent some padding, and then the margin will have something to push against.

Generally if you want to move something away from its siblings, use margin, if you want it to move away from the edges of its parents, use padding.