Question

将网站迁移到新的托管网站（Squarespace）。大多数简单，好，无痛......除了与显示具有以下元素的功能相关的1个问题：标题图像，背景图像和在背景上分层的另一个图像。在所有情况下，标题图像和背景之间存在差距 - 可能是4-5像素。我附上了一张显示问题的图片。我可以测试浏览器（Firefox，IE，Chrome）。

如果我首先添加文本（在图像之前）....并且在原始网站中不会发生这种情况 - 只有当我将其迁移到Squarespace时才会出现这种情况。如果我将线条高度调整到可以折叠文本的荒谬的东西，我只能让额外的空间消失。我已经检查过是否有其他Squarespace CSS（如整体“身体”设置或某些东西）可能会影响这一点 - 我无法看到。

会喜欢任何建议。谢谢！

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

Answer 1

我看不到图片或HTML，因此很难具体。

尝试添加此内容：

img {
    vertical-align: top
}

如果修复了此问题，则您有this problem。

如果可行，您可以仅将vertical-align: top应用于需要它的img元素而不是所有元素（尽管这不太重要）。

CSS间距/填充问题与图像元素

1 个答案: