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开发者_JS百科-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>
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.
- Inspect each element in Chrome, first image then span.
- Expand Metrics on right side of window
- The little graph will show you what each contributor to element size is (padding, margin, border, element size)
test in my page, the height is 15px
do you set any span padding?
or try to do *{padding:0;margin:0;}.
or given the span a class, make .span{padding:0!important;margin:0!important;}
or add
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
to the page top part for W3C
Use Chrome's developer tools to inspect the element and trace the computed styles. I think it's very likely you're picking up padding styles from somewhere.
To view the layout of your html elements, check out my new tool!
HTML Box Visualizer - GitHub
加载中,请稍侯......
精彩评论