个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在 Menu+Content 和 footer 之间得到了一个意想不到的空间，我不知道它是从哪里来的，因为我想摆脱它。以下是代码及其在 Chrome 和 Firefox 中的显示方式:
(抱歉格式不好，我不知道该怎么做)
索引
<!DOCTYPE html>
<html>
<head>
<title>Online Contacts</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>OnCo</h1>
</div>
<div id="menu">
<b>Menu</b><br>
ab<br>
cd<br>
ef
</div>
<div id="content">
Content goes here
</div>
<div id="footer">
Copyright Š joj
</div>
</div>
</body>
</html>
CSS
div {
/*colturi rotunde*/
border-radius: 10px;
}
body{
/*gradient care se repeta orizontal numai*/
background-image:url('a.jpg');
background-repeat:repeat-x;
}
#container {
/*bg transparent*/
background-color:rgba(255,255,255,0.3);
max-width:960px;
/*centrat in pagina*/
margin: 0 auto;
/*distanta dintre border si continut*/
padding-top:15px;
padding-right:15px;
padding-left:15px;
padding-bottom:15px;
}
#header {
background-color:#FFA500;
position: relative;
top: -20px;
}
#menu{
background-color:#FFD700;
width:60px;
float:left;
position: relative;
top: -35px;
margin-right:5px;
}
#content{
background-color:#EEEEEE;
min-height:200px;
width:895px;
float:left;
position: relative;
top: -35px;
}
#footer {
background-color:#FFA500;
clear:both;
text-align:center;
}
图片
空格就在页脚上方。页脚实际上应该非常靠近 content div。
最佳答案
移除“top: xxpx”，为元素添加边距以分隔它们，并从 Headers h1 中移除 margin-top 和 margin-bottom
#header > h1 {
margin-top : 0px;
margin-bottom: 0px;
}
fiddle (没有间距边距)
关于html - 意想不到的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23843095/
24
4
0
我是一名优秀的程序员,十分优秀！