Question

我想弄清楚如何摆脱包含<div>标签的内部<img>中的额外高度。我已经尝试过css重置，但据我所知，它没有完全重置。

在下面的HTML和CSS中，我有3个<img>标签垂直堆叠，每个32px。我希望它们与包含它们的<div>之间没有空间，我希望它的高度为96px。您可以在js fiddle中看到<img>标记之间有空格，内部div的高度为＆gt; 100px的。

更新链接的可能重复的帖子可以很好地解释发生了什么：

默认情况下，图像以内嵌方式呈现，就像字母一样。它坐在 a，b，c和d所在的同一条线。那条线下方有空间对于你在f，j，p和q等字母上找到的下降器。您可以调整图像的垂直对齐以将其定位在其他位置。

然而，调整vertical-align: top并没有完全解决问题，因为还有额外的高度。在我的情况下，有必要设置line-height:0以完全删除所有额外的高度。

HTML：

<div class="ss-buttons">
  <div class="outer">
    <div class="inner">

      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>

    </div>
  </div>
</div>

CSS

html,
body {
  min-width: 100%;
  height: initial;
}

body {
  line-height: 1;
}

html,
body,
div,
span,
a,
img,
p,
pre {
  border: 0;
  padding: 0;
  margin: 0;
}

img.sprite-32 {
  display: inline-block;
  width: 44px;
  height: 32px;
  z-index: 0;
}

.outer {
  width: 44px;
  display: inline-block;
  position: relative;
  height: 96px;
}

.inner {
  width: 44px;
  position: absolute;
  display: inline-block;
  left: 0px;
  z-index: 2000;
  top: 0px;
}

a {
  display: inline-block;
  height: 32px;
}

img.ss-zoom {
  background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}

div.ss-buttons img {
  border: none;
  background-color: green;
}

Answer 1

将line-height:0;添加到 .inner

html,
body {
  min-width: 100%;
  height: initial;
}

body {
  line-height: 1;
}

html,
body,
div,
span,
a,
img,
p,
pre {
  border: 0;
  padding: 0;
  margin: 0;
}

img.sprite-32 {
  display: inline-block;
  width: 44px;
  height: 32px;
  z-index: 0;
}

.outer {
  width: 44px;
  display: inline-block;
  position: relative;
  height: 96px;
}

.inner {
  width: 44px;
  position: absolute;
  display: inline-block;
  left: 0px;
  z-index: 2000;
  top: 0px;
  line-height: 0;
}

a {
  display: inline-block;
  height: 32px;
}

img.ss-zoom {
  background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}

div.ss-buttons img {
  border: none;
  background-color: green;
}

<div class="ss-buttons">
  <div class="outer">
    <div class="inner">

      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>

    </div>
  </div>
</div>

Answer 2

将QApplication(int & argc, char ** argv)添加到您的vertical-align: top;元素CSS样式（a）。这将使它们排成一行，没有间距。当您使用<a>时，由于某种原因，CSS3将默认的inline-block属性默认为vertical-align，因此间距。如果您将baseline更改为vertical-align，则会删除您的间距问题。

这是top元素样式的更新CSS代码段：

<a>

Answer 3

只需在{css

中将float:left添加到a标记即可

a{
  float:left;
}

你的CSS将是

html,
body {
  min-width: 100%;
  height: initial;
}

body {
  line-height: 1;
}

html,
body,
div,
span,
a,
img,
p,
pre {
  border: 0;
  padding: 0;
  margin: 0;
}

img.sprite-32 {
  display: inline-block;
  width: 44px;
  height: 32px;
  z-index: 0;
}

.outer {
  width: 44px;
  display: inline-block;
  position: relative;
  height: 96px;
}

.inner {
  width: 44px;
  position: absolute;
  display: inline-block;
  left: 0px;
  z-index: 2000;
  top: 0px;
}

a {
  display: inline-block;
  height: 32px;
}

img.ss-zoom {
  background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}

div.ss-buttons img {
  border: none;
  background-color: green;
}
a{
  float:left;
}

摆脱额外的高度 - CSS重置？

3 个答案: