Zo72 Zo72 - 1 month ago 10
CSS Question

how do I debug the height of a div/span?

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 15x15 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>

Answer

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