Image inside div has extra space below the image

Question

Why in the following code the height of the div is bigger than the height of the img   There is a gap below the image  but it doesn t seems to be a padding margin    What is the gap or extra space below image    x000D   x000D   wrapper   x000D    border  1px solid red  x000D    width 200px  x000D    x000D  img   x000D    width 200px  x000D    x000D   lt div id  wrapper  gt  x000D     lt img src  http   i imgur com RECDV24 jpg    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another option suggested in this blog post is setting the style of the image as style  quot display  block  quot

User · Answer

I used line-height 0 and it works fine for me

User · Answer

Quick fix   To remove the gap under the image  you can    Set the vertical-align property of the image to vertical-align  bottom   vertical-align  top  or vertical-align  middle  Set the display property of the image to display block    See the following code for a live demo    x000D   x000D   vAlign img   x000D    vertical-align  bottom  x000D    x000D   block img  x000D    display block  x000D    x000D   x000D  div  border  1px solid red width 100px   x000D  img  width 100px   x000D   lt p gt No fix  lt  p gt  x000D   lt div gt  lt img src  http   i imgur com RECDV24 jpg    gt  lt  div gt  x000D   x000D   lt p gt With vertical-align bottom  on image  lt  p gt  x000D   lt div id  vAlign  gt  lt img src  http   i imgur com RECDV24 jpg    gt  lt  div gt  x000D   x000D   lt p gt With display block  on image  lt  p gt  x000D   lt div id  block  gt  lt img src  http   i imgur com RECDV24 jpg    gt  lt  div gt  x000D   x000D   x000D      Explanation  why is there a gap under the image   The gap or extra space under the image isn t a bug or issue  it is the default behaviour  The root cause is that images are replaced elements  see MDN replaced elements   This allows them to  act like image  and have their own intrinsic dimensions  aspect ratio     Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements  as you can vertical align them  give them a height  top bottom margin and padding  transforms        This also means that       lt img gt  has no baseline  so when images are used in an inline formatting   context with vertical-align  baseline  the bottom of the image will be   placed on the text baseline     source  MDN  emphasis mine    As browsers by default compute the vertical-align property to baseline  this is the default behaviour  The following image shows where the baseline is located on text     Image source   Baseline aligned elements need to keep space for the descenders that extend below the baseline  like j  p  g      as you can see in the above image  In this configuration  the bottom of the image is aligned on the baseline as you can see in this example    x000D   x000D  div border 1px solid red font-size 30px   x000D  img width 100px height auto   x000D   lt div gt  x000D     lt img src  http   i imgur com RECDV24 jpg    gt jpq are letters with descender x000D   lt  div gt  x000D   x000D   x000D      This is why the default behaviour of the  lt img gt  tag creates a gap at the bottom of it s container and why changing the vertical-align property or the display property removes it as in the following demo    x000D   x000D  div  width  100px border  1px solid red   x000D  img  width  100px height  auto   x000D   x000D   block img  x000D    display block  x000D    x000D   bottom img  x000D    vertical-align bottom  x000D    x000D   lt p gt Default  lt  p gt  x000D   lt div gt  x000D     lt img src  http   i imgur com RECDV24 jpg    gt  x000D   lt  div gt  x000D   lt p gt With display block  lt  p gt  x000D   lt div class  block  gt  x000D     lt img src  http   i imgur com RECDV24 jpg    gt  x000D   lt  div gt  x000D   lt p gt With vertical-align bottom  lt  p gt  x000D   lt div class  bottom  gt  x000D     lt img src  http   i imgur com RECDV24 jpg    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I just added float left to div and it worked

User · Answer

I found it works great using display block  on the image and vertical-align top  on the text    x000D   x000D   imagebox   x000D      width 200px  x000D      float left  x000D      height 88px  x000D      position relative  x000D      background-color   999  x000D    x000D   container   x000D      width 600px  x000D      height 176px  x000D      background-color   666  x000D      position relative  x000D      overflow hidden  x000D    x000D   text   x000D      color   000  x000D      font-size  11px  x000D      font-family  robotomeduim  sans-serif  x000D      vertical-align top  x000D       x000D    x000D   x000D   imagebox img  display block   x000D   lt div class  container  gt  x000D       lt div class  imagebox  gt  x000D           lt img src  http   machdiamonds com n69xvs jpg    gt   lt span class  text  gt Image title lt  span gt  x000D       lt  div gt  x000D       lt div class  imagebox  gt  x000D           lt img src  http   machdiamonds com n69xvs jpg    gt   lt span class  text  gt Image title lt  span gt  x000D       lt  div gt  x000D       lt div class  imagebox  gt  x000D           lt img src  http   machdiamonds com n69xvs jpg    gt   lt span class  text  gt Image title lt  span gt  x000D       lt  div gt  x000D       lt div class  imagebox  gt  x000D           lt img src  http   machdiamonds com n69xvs jpg    gt   lt span class  text  gt Image title lt  span gt  x000D       lt  div gt  x000D       lt div class  imagebox  gt  x000D           lt img src  http   machdiamonds com n69xvs jpg    gt   lt span class  text  gt Image title lt  span gt  x000D       lt  div gt  x000D       lt div class  imagebox  gt  x000D           lt img src  http   machdiamonds com n69xvs jpg    gt   lt span class  text  gt Image title lt  span gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    or you can edit the code a JS FIDDLE

User · Answer

All you have to do is assign this property   img       display  block      The images by default have this property   img       display  inline

User · Answer

One can also nullify parent s line height    wrapper     line-height  0      All fixes  http   jsfiddle net FaPFv

User · Answer

By default  an image is rendered inline  like a letter so it sits on the same line that a  b  c and d sit on   There is space below that line for the descenders you find on letters like g  j  p and q     You can    adjust the vertical-align of the image to position it elsewhere  e g  the middle  or change the display so it isn t inline     x000D   x000D  div   x000D    border  solid black 1px  x000D    margin-bottom  10px  x000D    x000D   x000D   align-middle img   x000D    vertical-align  middle  x000D    x000D   x000D   align-base img   x000D    vertical-align  bottom  x000D    x000D   x000D   display img   x000D    display  block  x000D    x000D   lt div id  default  gt  x000D   lt h1 gt Default lt  h1 gt  x000D    The quick brown fox jumps over the lazy dog  lt img src  https   upload wikimedia org wikipedia commons thumb f f2 VangoghStarry-night2 jpg 300px-VangoghStarry-night2 jpg  alt    gt  x000D   lt  div gt  x000D   x000D   lt div id  align-middle  gt  x000D   lt h1 gt vertical-align  middle lt  h1 gt  x000D    The quick brown fox jumps over the lazy dog  lt img src  https   upload wikimedia org wikipedia commons thumb f f2 VangoghStarry-night2 jpg 300px-VangoghStarry-night2 jpg  alt    gt   lt  div gt  x000D     x000D     lt div id  align-base  gt  x000D   lt h1 gt vertical-align  bottom lt  h1 gt  x000D    The quick brown fox jumps over the lazy dog  lt img src  https   upload wikimedia org wikipedia commons thumb f f2 VangoghStarry-night2 jpg 300px-VangoghStarry-night2 jpg  alt    gt   lt  div gt  x000D   x000D   lt div id  display  gt  x000D   lt h1 gt display  block lt  h1 gt  x000D    The quick brown fox jumps over the lazy dog  lt img src  https   upload wikimedia org wikipedia commons thumb f f2 VangoghStarry-night2 jpg 300px-VangoghStarry-night2 jpg  alt    gt  x000D   lt  div gt  x000D   x000D   x000D      The included image is public domain and sourced from Wikimedia Commons

User · Answer

You can use several methods for this issue like   Using line-height   wrapper    line-height  0px      Using display  flex   wrapper    display  flex             wrapper    display  inline-flex      Using display  block  table  flex and inherit   wrapper img    display  block        wrapper img    display  table        wrapper img    display  flex         wrapper img    display  inherit

[html] Image inside div has extra space below the image

Examples related to html

Examples related to css

Examples related to image