img gap at the boundary of the vessel (slit) img and div (block type element) with a lower bound distance (or called slit gap) solution ...

 img and div (block type element) with a lower bound distance (or called slit, voids).

solution:

Magic one: a picture img tag display: block

Magic 2: Custom Picture img tag vertical-align: bottom, vertical- align: middle, vertical-align: top.

 img{vertical-align:bottom;}  

As HTML attribute align = "center" (for image viewer handles to align = "middle") solution, equivalent to vertical-align: middle; it is the same reason, do not take as long as vertical-align baseline, this gap disappeared.

 

Magic 3: definition of container in the font size is 0.

div { 
width:110px; 
border:1px solid #000000; 
font-size:0 
} 

 

It is said that the reason:

Pictures of text and other inline elements by default and the baseline of the parent element aligned, and baseline and the bottom edge of the parent and a certain distance (this distance and font-size, font-family related), so set the vertical-align: top / bottom / text-top / text-bottom can be avoided this situation. And not just li, other block element contains img will have this phenomenon.

 

Instructions

1.ie There are several modes of display, the beginning of a statement in html document <! DOCTYPE ....>

If declared as strict mode, ie display the document in a way w3c, w3c standards while inside <img /> is an inline default label, unless they explicitly declared as block

2. That gap is ie box model for the default line-height and font-size to img desplay: block; although they would solve the problem, but did not come up in view of the structure can be described as a palliative...

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/03/16/2962443.html