Css: div sticking to top of parent container

Asked May 21 '18 at 14:41

Active May 21 '18 at 14:44

Viewed 20 times

my div inside a parent container should have a margin of 20px from the top from the container instead the margin top applys to the parent container...

#rules-panel {
 background-color:blue;
 width:80%;
 margin:0 auto;
 height:800px;
}

#rules-panel .box {
 margin:20px;
  margin-top:20px; /* why isn't the margin working */
 background-color:red;
}

<div id="rules-panel">

 <div class="box">
  <p>THIS IS div</p>
  <p>THIS IS div</p>
  <p>THIS IS div</p>
  <p>THIS IS div</p>
  <p>THIS IS div</p>
 </div>
  
</div>

asked May 21 '18 at 14:41

AfaqQazi

1

@Lewis, no he simply need to add `overflow:hidden` – Temani Afif May 21 '18 at 14:44
Interesting, didn't know that. +1 – Lewis May 21 '18 at 14:45
@TemaniAfif it worked. Could you please explain why overflow:hidden was needed im confused ? – AfaqQazi May 21 '18 at 14:48
everything is explained within the duplicate question :) this is called margin-collpasing – Temani Afif May 21 '18 at 14:48

Css: div sticking to top of parent container

0 Answers0