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
Post a Comment