html - DIV height based on child image height adds few extra pixels at the bottom -
why parent div of image have few pixels @ bottom. how can remove pixels without hard code parent div height.
html
<div class="wrapper"> <div class="column"> <img src="http://www.lorempixel.com/200/200/" /> </div> </div>
css
.wrapper { width:200px; margin:0 auto; } .column { width:100%; background:#cc0000; } img { width:100%; }
that space result of descender elements in fonts. can rid of in number of ways:
- add
vertical-align:top
rule image jsfiddle example - add
font-size:0;
containing div jsfiddle example - add
display:block;
image jsfiddle example
Comments
Post a Comment