页面顶部和页眉之间的空格

我正在尝试完成页眉，但页面顶部和页眉之间存在大量空间。我想保持我的形象，但顶部的标题，但相同的大小。这里是我的代码：页面顶部和页眉之间的空格

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。

来源

2015-04-06 ieblake

的marrgin-top: 40px如果你只格式化你的HTML正确.... – 2015-04-06 09:20:14

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

来源

2015-04-06 09:18:44 ketan

它使背景上去，然后我怎么向下移动图像？ – ieblake 2015-04-06 09:19:26

给予'padding-top：40px;'。 – ketan 2015-04-06 09:21:10

谢谢@ketan，我会在3分钟内将它标记为正确lol – ieblake 2015-04-06 09:28:28

您有失踪<div>标签这里

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

ID为 “标志” 的DIV不具有相应的结束标记。我不确定这是否能解决问题，但肯定会在低端浏览器中出现意外行为，这些浏览器无法自动匹配缺少的HTML标记。

来源

2015-04-06 09:19:32 Diptendu

取下#header_logo类

检查这个fiddle

来源

2015-04-06 09:22:35 Jackson

这已经在3分钟前回答了... – 2015-04-06 09:22:53

我不知道他何时发布答案....：| – Jackson 2015-04-06 09:23:49

页面顶部和页眉之间的空格

回答

相关问题