Why is CSS style for top and bottom margins not applied to inner div -


this question has answer here:

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.

jsfiddle example

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

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -