擺脫額外高度 - CSS重置？

Question

我想弄清楚如何擺脫我的內部<div>其中包含<img>標籤的額外高度。據我所知，我嘗試了一次css重置，但沒有進行完全重置。

在下面的HTML和CSS中，我有3個<img>標籤垂直堆疊，每個32px。我希望它們之間沒有空間，並且包含它們的<div>，我預計它的高度爲96px。您可以在js fiddle中看到<img>標記與內部div之間有一個高度> 100px的空格。

UPDATE可能重複後掛很好地解釋發生了什麼：

默認情況下，圖像被內聯呈現，就像一個字母。它坐落在與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

只需添加float:left到a標籤在CSS

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

Answer 3

添加vertical-align: top;您a元素的CSS樣式（<a>）。這將排成一行，沒有間距。當您使用inline-block時，出於某種原因，CSS3默認爲vertical-align屬性，因此爲baseline，因此爲空格。如果您將vertical-align更改爲top它將刪除您的間距問題。

下面是<a>元素樣式更新的CSS代碼片段：

/* ...rest of your CSS */ 

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

/* rest of your CSS... */