Home/ Questions/Q 6629253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:14:01+00:00

I have html like this: <div> <span style=display: inline-block;height:20px>20</span> <span style=display: inline-block;><img src=img/ex.png/></span> </div>

  • 0

I have html like this:

<div>
  <span style="display: inline-block;height:20px">20</span>
  <span style="display: inline-block;"><img src="img/ex.png"/></span>
</div>

The image I am importing in the second span is 15×15 pixels

I can check with chrome and I can see that the first img has height 15
and the second span has height 21. (the first one has height 20 as expected)

can somebody tell me why the second span has height 21 instead of 15 ???

Thanks, it’s driving me nuts

I am adding the ode below:

<!DOCTYPE html>
<html>
  <head>
  <style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
  </style>
   </head>
  <body>

  <div>
  <span style="display: inline-block;height:20px">20</span>
  <span style="display: inline-block;"><img src="img/ex.png"/></span>
  </div>



</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well either the image is bigger than you think, the image has padding/margin that you aren’t taking into account or the span has padding/margin that you aren’t taking into account.

    1. Inspect each element in Chrome, first image then span.
    2. Expand Metrics on right side of window
    3. The little graph will show you what each contributor to element size is (padding, margin, border, element size)

    enter image description here

    • 0