Why is CSS style for top and bottom margins not applied to inner div -
this question has answer here:
- why css margin-top style not work? 11 answers
curious why top , bottom margins of 10px not applied inner div in snippet below. if set inner display property "inline-block" applies top/bottom margins expected.
html:
<div class="outer"> <div class="inner"> content... </div> </div> css:
.outer { background-color: lightgrey; } .inner { background-color: green; padding: 50px; width: 600px; margin:10px; display: block; /* no top, bottom margins applied. apply them "inline-block". why? */ }
the .inner top margin collapsing.
an easy fix make outer display:inline-block should put padding:10px on outer , no margin on inner.
Comments
Post a Comment