Question

我现在在我的一个客户网站上的CSS更改上工作了几个小时。我的客户希望标题图像（徽标）出现在屏幕顶部，顶部和徽标之间没有空格。

<header id="header">
  <div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">
    <div class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-top="3px" data-margin-bottom="3px" style="margin-right:0px;margin-top:3px;margin-left:0px;margin-bottom:3px;">
      <a href="#">
        <img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
      </a>
    </div>
  </div>
</header>

我找不到正确的.css设置来解决此问题并将标题图像移到顶部。我已经尝试过了：

margin-top: -30px;

......但这不起作用。这是一个Wordpress网站，我使用Avada，我唯一需要的是顶部的标题图片。

如果有人可以帮助我，那会很酷。

Answer 1

问题是您生成的代码包含padding-top:30px：

<div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">

我知道你无法改变这一点，简单的CSS不会帮助你，因为内联样式更重要。

使用this trick使用外部CSS覆盖内联样式：

.avada-row {
    padding-top:0px !important;
}

Answer 2

tha class＆＃34; .avada-row＆＃34;是填充顶部，因此您需要删除该填充：

.avada-row { padding-top: 0px !important; }

Answer 3

使用此HTML

<header id="header">
  <div style="padding-bottom:0px; overflow:hidden;" class="avada-row">
    <div style="margin-right:0px;margin-left:0px;margin-bottom:3px;" class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-bottom="3px">
      <a href="#">
        <img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
      </a>
    </div>
  </div>
</header>

或使用此css

.avada-row {
    padding-top: 0px !important;
}
.avada-row .logo {
    margin: 0px !important;
}

CSS - Top to Logo = 0px

3 个答案: