Remove white space below image

Question

In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border  see below    I ve tried everything I can think of in Firebug with no luck   How can I remove this white space

User · Answer

If you would like to preserve the image as inline you can put vertical-align  top or vertical-align  bottom on it  By default it is aligned on the baseline hence the few pixels beneath it

User · Answer

You can use code below if you don t want to modify block mode   img vertical-align text-bottom    Or you can use following as Stuart suggests   img vertical-align bottom

User · Answer

I ve set up a JSFiddle to test several different solutions to this problem   Based on the  vague  criteria of     1  Maximum flexibility      2  No weird behavior   The accepted answer here of  img   display  block      which is recommended by a lot of people  such as in this excellent article   actually ranks fourth   1st  2nd  and 3rd place are all a toss-up between these three solutions   1  The solution given by  Dave Kok and  Hasan Gursoy   img   vertical-align  top       or bottom      pros    All display values work on both the parent and img  No very strange behavior  any siblings of the img fall where you d expect them to  Very efficient    cons    In the  perfectly valid  case of both the parent and img having  display  inline   the value of this property can determine the position of the img s parent  a bit strange     2  Setting font-size  0  on the parent element    parent       font-size  0      vertical-align  top     parent  gt          font-size  16px      vertical-align  top      Since this one  kind of  requires vertical-align  top on the img  this is basically an extension of the 1st solution   pros    All display values work on both the parent and img  No very strange behavior  any siblings of the img fall where you d expect them to  Fixes the inline whitespace problem for any siblings of the img  Although this still moves the position of the parent in the case of the parent and img both having  display  inline   at least you can t see the parent anymore    cons    Less efficient code  This assumes  correct  markup  if the img has text node siblings  they won t show up    3  Setting line-height  0 on the parent element    parent       line-height  0      vertical-align  top     parent  gt          line-height  1 15      vertical-align  top      Similar to the 2nd solution in that  to make it fully flexible  it basically becomes an extension of the 1st   pros    Behaves like the first two solutions on all display combinations except when the parent and img have  display  inline     cons    Less efficient code  In the case of both the parent and img having  display  inline   we get all sorts of crazy    Maybe playing with the  line-height  property isn t the best idea       So there you have it   I hope this helps some poor soul

User · Answer

I found this question and none of the solutions here worked for me   I found another solution that got rid of the gaps below images in Chrome   I had to add line-height 0  to the img selector in my CSS and the gaps below images went away   Crazy that this problem persists in browsers in 2013

User · Answer

youtube-thumb img  display block   or  youtube-thumb img  float left

User · Answer

You re seeing the space for descenders  the bits that hang off the bottom of  y  and  p   because img is an inline element by default   This removes the gap    youtube-thumb img   display  block

User · Answer

As stated before  the image is treated as text  so the bottom is to accommodate for those pesky   p q y g j   the easiest solution is to assign the img display block  in your css     But this does inhibit the standard image behavior of flowing with the text  To keep that behavior and eliminate the space  I recommend wrapping the image with something like this    lt style gt       imageHolder               display  inline-block            img noSpace               display  block         lt  style gt   lt div class  imageHolder  gt  lt img src  myimg png  class  noSpace   gt  lt  div gt

User · Answer

Had this prob  found perfect solution elsewhere if you dont want you use block just add  img   vertical-align  top

User · Answer

Give the height of the div  youtube-thumb the height of the image  That should set the problem in Firefox browser    youtube-thumb  height  106px

[css] Remove white space below image

Examples related to css

Examples related to image

Examples related to whitespace

Examples related to border

Examples related to removing-whitespace