CSS

Question

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

<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 设置来解决这个问题并将 header 图像移到顶部。我已经试过了：

margin-top: -30px;

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

如果有人能帮助我，那就太好了。

Answer 1

tha class “.avada-row”是顶部填充的，因此您需要删除该填充：

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

Answer 2

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

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

我知道你无法更改它，简单的 CSS 对你没有帮助，因为内联样式更重要。

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

.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 - 顶部到徽标 = 0px

CSS - Top to Logo = 0px

html

wordpress