Question

我有这样的HTML：

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

我在第二个范围内导入的图像是15x15像素

我可以用chrome检查，我可以看到第一个img的高度为15 第二个跨度高度为21.（第一个高度为20，如预期的那样）

有人可以告诉我为什么第二个跨度的高度为21而不是15 ???

谢谢，这让我疯狂

我正在添加下面的颂歌：

<!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 1

无论图像是否比您想象的要大，图像都有填充/边距，您没有考虑到这一点，或者跨度有未考虑的填充/边距。

检查Chrome中的每个元素，首先是图像，然后是跨度。
展开窗口右侧的指标
小图表将显示每个元素大小的贡献者（填充，边距，边框，元素大小）

enter image description here

Answer 2

在我的页面中测试，高度为15px

你设置任何span填充吗？

或尝试*{padding:0;margin:0;}。

或给定一个班级，使.span{padding:0!important;margin:0!important;}

或添加

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

到W3C的页面顶部

Answer 3

使用Chrome的开发人员工具检查元素并跟踪计算出的样式。我认为你很可能从某个地方挑选填充样式。

Answer 4

要查看html元素的布局，请查看我的新工具！

HTML Box Visualizer - GitHub

如何调试div / span的高度？

4 个答案: