我在页面的页脚下方和上方都有一个额外的空间,我尝试使用margin:0;和填充,但它仍然存在。
这是我的整个HTML代码:
<div id="header">
<div id="images">
<img src="f1.png" />
<img src="linkedin.png" />
<img src="t1.png" />
<div id="menu">
<img src="email1.png" />
<img src="pen_marker.png" />
</div>
</div>
</div>
<div id="main">
<img src="url.jpg" />
</div>
<div id="footer"></div>
这是我的css部分:
body {
margin:0;
}
#header {
padding:0;
margin:0;
width:100%;
background-color: rgba(0, 0, 0, .7);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .7);
-moz-box-shadow:0 2px 3px 0px rgba(0, 0, 0, .7);
-webkit-box-shadow:0 2px 3px 0px rgba(0, 0, 0, .7);
position: fixed;
}
#menu {
margin-top: 5px;
margin-right: 50%;
float:right;
}
#menu img {
padding-left:0;
}
#images img {
margin-left:30px;
}
#main {
width:100%;
margin:0;
padding:0;
}
#main img {
width:100%;
}
#footer {
height:60px;
background-color: #000;
margin:0;
padding:0;
}
我无法弄清楚它是因为继承还是什么。
页脚下方仍有空格:
答案 0 :(得分:2)
我明白你的意思。
默认情况下,图像是内联元素
如果您将该图像设置为display:block
,则该空间会消失。
#main img {
width:100%;
display:block;
}
尝试以下方法:
body {
margin: 0;
}
#header {
padding: 0;
margin: 0;
width: 100%;
background-color: rgba(0, 0, 0, .7);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .7);
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, .7);
position: fixed;
}
#menu {
margin-top: 5px;
margin-right: 50%;
float: right;
}
#menu img {
padding-left: 0;
}
#images img {
margin-left: 30px;
}
#main {
width: 100%;
margin: 0;
padding: 0;
}
#main img {
width: 100%;
display: block;
}
#footer {
height: 60px;
background-color: #00F;
margin: 0;
padding: 0;
}
<div id="header">
<div id="images">
<img src="f1.png" />
<img src="linkedin.png" />
<img src="t1.png" />
<div id="menu">
<img src="email1.png" />
<img src="pen_marker.png" />
</div>
</div>
</div>
<div id="main">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" />
</div>
<div id="footer"></div>
这是一个截屏:
答案 1 :(得分:0)
试试这个
#main img {
width:100%;
display:block;
}
答案 2 :(得分:0)
答案 3 :(得分:0)
关于页脚后的空格,我有一个问题。 滚动条可见吗?因为我在第一个截图中没有看到任何内容。可能是页面不够长,不适合您的屏幕尺寸。尝试在页脚之前添加更多内容,并检查间距是否仍然存在。
此致
编辑:
要将页脚粘贴到底部,请使用以下代码 -
footer {
position:absolute;
margin:0;
padding:0;
bottom:0;
left:0;
width:100%;
/* Include other footer properties */
}
我希望有帮助:)
答案 4 :(得分:-2)