html - Display inline causing element to be pushed further down -


if @ codepen here:

http://codepen.io/anon/pen/lhbqs

and change "display: block" on img "display: inline", causes text "fine dining in casual environment" pushed further down.

the "fine dining" element below h2, block element, why make difference whether or not img tag block or inline since block element cannot show on same line inline element anyways?

this related margin collapsing - img , h2 below have margins "touch" each other, block elements margins collapse (merge one), while inline elements not , both apply, hence additional space.

check article - http://www.howtocreate.co.uk/tutorials/css/margincollapsing


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -