圖像元素的CSS間距/填充問題

正在將網站遷移到新的託管網站（Squarespace）。大多是簡單，好，和無痛......除了與顯示具有以下元素的特徵相關的1個問題：標題圖像，背景圖像和分層疊加在背景上的另一圖像。在所有這些情況下，標題圖像和背景之間有一段距離 - 可能是4-5像素。我附上了顯示問題的圖片。在我可以測試的瀏覽器（Firefox，IE，Chrome）中發生。圖像元素的CSS間距/填充問題

這似乎沒有發生，如果我先添加文本（圖像之前）....並且它不會發生在原始網站 - 只有當我將它遷移到Squarespace。我只能讓額外的空間消失，如果我把線條高度調整爲讓文字變細的荒謬的東西。我檢查過是否有其他的Squarespace CSS（比如整體的「body」設置或者其他東西）可能會影響到這一點 - 我看不到任何東西。

會愛任何建議。謝謝！

這裏的CSS（中沒有任何的變化，從原來的網站新平臺）：

#hpLeftBuckets {float:left;width:544px;} 

    #hpGetInspired {width:510px;float:left;padding-left:34px;} 
    #hpGetInspiredMain {width:470px;height:292px;float:left;background:url('/storage/images/hp_gisp_bg.jpg');background-repeat:repeat-y;} 

    #hpGISYPWrapper {width:510px;padding-top:20px;padding-bottom:34px;float:left;padding-left:20px;} 
    #hpGISYPWrapper ul {margin-left: 0px;margin-top:6px;margin-bottom:6px;margin-right:50px;padding-top:0px;padding-bottom:0px;padding-left: 0px;list-style: none;} 
    #hpGISYPWrapper ul li{padding-left: 18px;padding-bottom:8px;background-image: url(/storage/images/greenLeafBullet.gif);background-repeat: no-repeat;background-position: 0px 2px;} 

    .hp_GISYP-BG {background:url('/storage/images/hp_GISYP-BG.jpg');background-repeat:no-repeat;width:245px;height:222px;background-position: top;} 
    .hp_GISYP-Img {padding-left:17px;border:none;text-align:left;} 
    .hp_GISYP-Text {text-align:left;padding:10px 17px 8px 17px;} 
    .hp_GISYP-small {padding-top:3px;} 
    .hp_GISYP-small a {font-size:9px;} 
    #hpGetInvolved {width:245px;float:left;padding-right:12px;} 
    #hpShareYourProjects {width:245px;float:left;padding-right:3px;}

來源

2011-09-04 Nora

附件圖像在哪裏？ –

我無法看到圖像或HTML，所以很難具體。

嘗試添加此：

img { 
    vertical-align: top 
}

問題能否解決，你有this problem。

如果可行，您可以將vertical-align: top僅應用於需要它的元素而不是所有元素（儘管這不太可能）。

來源

2011-09-04 18:16:12 thirtydot

display：block是這個行爲的另一個'修復';當然，這些特性還有其他副作用，所以很可能一個比另一個更合適 –

圖像元素的CSS間距/填充問題

回答

相關問題