Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position.
padding:0;
margin:0;
border:0;
line-height:0;
<div class="box small">
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Noah_Webster_200x200.jpg">
</div>
.box {
background-color: #B9C4F4;
border-radius: 3px;
display: inline-block;
margin: 3px;
}
I've spent hours trying to troubleshoot this issue with no success. Any guidance would be greatly appreciated!
Resin