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

我正试图找出如何去除我的内部

中包含

标签的额外高度。我已经尝试了css重置，但据我所知，它并没有完全重置

在下面的HTML和CSS中，我有3个垂直堆叠的标签，每个32px。我希望它们和包含它们的

之间没有空间，我希望高度为96px。您可以在中看到，

标记之间有空格，内部div的高度大于100px

更新链接到的可能重复的帖子很好地解释了正在发生的事情：

默认情况下，图像以内联方式呈现，就像字母一样。它坐在桌子上 和a，b，c，d坐在同一条线上。那条线下有一块空地 对于字母f、j、p和q上的后代。你可以 调整图像的垂直对齐以将其定位到其他位置

但是，调整

垂直对齐：顶部

并不能完全解决问题，因为仍然有额外的高度。在我的例子中，有必要设置

行高度：0

，以完全删除所有额外的高度

HTML：

---

只需将

float:left

添加到css中的

a

标记

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;
}

你的CSS将是

a{
  float:left;
}

---

只需将

float:left

添加到css中的

a

标记

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;
}

你的CSS将是

a{
  float:left;
}

---

添加

行高：0至。内部


html，
身体{
最小宽度：100%；
高度：初始高度；
}
身体{
线高：1；
}
html，
身体，
分区，
跨度
A.
img，
P
前{
边界：0；
填充：0；
保证金：0；
}
图像精灵-32{
显示：内联块；
宽度：44px；
高度：32px；
z指数：0；
}
.外部{
宽度：44px；
显示：内联块；
位置：相对位置；
高度：96px；
}
.内部{
宽度：44px；
位置：绝对位置；
显示：内联块；
左：0px；
z指数：2000；
顶部：0px；
线高：0；
}
a{
显示：内联块；
高度：32px；
}
img.ss-zoom{
背景：url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png)无重复0px 0px滚动；
}
分区ss按钮img{
边界：无；
背景颜色：绿色；
}
添加
行高：0至。内部


html，
身体{
最小宽度：100%；
高度：初始高度；
}
身体{
线高：1；
}
html，
身体，
分区，
跨度
A.
img，
P
前{
边界：0；
填充：0；
保证金：0；
}
图像精灵-32{
显示：内联块；
宽度：44px；
高度：32px；
z指数：0；
}
.外部{
宽度：44px；
显示：内联块；
位置：相对位置；
高度：96px；
}
.内部{
宽度：44px；
位置：绝对位置；
显示：内联块；
左：0px；
z指数：2000；
顶部：0px；
线高：0；
}
a{
显示：内联块；
高度：32px；
}
img.ss-zoom{
背景：url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png)无重复0px 0px滚动；
}
分区ss按钮img{
边界：无；
背景颜色：绿色；
}
添加
垂直对齐：顶部到您的
a
元素CSS样式（
）。这将把它们排成一行，没有间隔。当您使用
内联块
时，出于某种原因，CSS3将默认的
垂直对齐
属性默认为
基线
，因此间距为。如果将
vertical align
更改为
top
，将消除间距问题

以下是
元素样式的更新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;
}

添加
垂直对齐：顶部到您的
a
元素CSS样式（
）。这将把它们排成一行，没有间隔。当您使用
内联块
时，出于某种原因，CSS3将默认的
垂直对齐
属性默认为
基线
，因此间距为。如果将
vertical align
更改为
top
，将消除间距问题

以下是
元素样式的更新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;
}

内联块
给了他们空间，为什么
和
内联块
？为什么设置
的背景？可能重复@LaraBelle-下面两个关于线高度的答案都解决了问题。但是你链接到的帖子的答案解释了“为什么”。谢谢<代码>内联块
给了他们空间，为什么
和
内联块
？为什么设置
的背景？可能重复@LaraBelle-下面两个关于线高度的答案都解决了问题。但是你链接到的帖子的答案解释了“为什么”。谢谢是的，这解决了问题。（另一个答案的
行高：0
也是如此）。看起来真正的问题是设置任何
行高度。我试图解释为什么
vertical align:top
去掉了额外的高度。我从另一篇帖子中看到：
默认情况下，图像以内联方式呈现，就像字母一样。它与a、b、c和d位于同一条线上。在这条线的下面有一个空格，你可以在字母f、j、p和q上找到下一个字母。您可以调整图像的垂直对齐以将其定位到其他位置。
@mseifert我认为这只是CSS3的“设置方式”：当在父元素上使用
内联
或
内联块
时，子元素将对齐
垂直对齐：基线默认情况下。我就是通过与许多
div
努力不使用
float
而只使用
内联块
来了解这一点的，我总是必须垂直对齐嵌套在
内联
元素中的顶部对象。它看起来确实像
行高
一样工作，这可能会删除任何高度，因此
顶部
、
基线
、或
底部
都是不相关的。@mseifert如果你看这里：，你会看到，
默认值：b