CODEWITHSUNDEEP
htmlcssreactjs
AashishKSahu
AashishKSahu

Reputation: 369

Child's margin not respecting the parent div

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

enter image description here

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?

Upvotes: 1

Views: 929

Answers (1)

Luke Storry
Luke Storry

Reputation: 6702

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.

Upvotes: 3

Related Questions