Question

我正在尝试完成我的标题，但页面顶部和标题之间有一个巨大的空间。我想保持我的图像到位，但标题在顶部，但相同的大小。这是我的代码：

HTML

<div id="header_logo-clearfix">
    <div id="header_logo"><a href="file:///C:/Users/Swag/Desktop/My%20Website/Home/home.html"><div id="logo"><img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100"></a>
    </div>
</div>

CSS

 #header_logo-clearfix {
    width: 100%;
    height: 180px;
    margin: 0;
    padding: 0;
    display: block;
    background-color: #02236a;
}

#header_logo {
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    margin-top: 40px;
}

JSFiddle

Answer 1

由于#header_logo {已margin-top: 40px;，只需删除它即可解决您的问题。

修改：

添加padding-top:40px;代替您的图片。

检查Fiddle.

新更新的CSS：

#header_logo-clearfix {
  width: 100%;
  height: 180px;
  margin: 0;
  padding: 0;
  display: block;
  background-color: #02236a;
}

#header_logo {
  margin-left: auto;
  margin-right: auto;
  width: 20%;
    padding-top: 40px;
}

Answer 2

您在此处缺少<div>标记

<div id="logo"><img src="Header/banner.png" alt="Logo" align="middle" width="300"height="100">

带有id＆＃34; logo＆＃34;的div没有相应的结束标记。我不确定这是否能解决问题，但它肯定会在低端浏览器中出现意外行为，无法自动匹配丢失的HTML标记。

Answer 3

从#header_logo类

中删除marrgin-top: 40px

检查此fiddle

页面顶部和标题之间的空格

3 个答案: