html - html右侧的额外空间?

标签 html css space

<!DOCTYPE html>
<html>
<head>
  <title>Risebush|home</title>
</head>

<body bgcolor=linear-gradient(#82FA58, #21610B), >
<div style="color:#61B329">
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Become a Member</li>
<li>Contact Us</li>
<li>Games</li>
<li>Movies</li>
</ul>
</div>
  <h1 align="center", style="font-family:cursive"><font size="7">Risebush Website</font></h1>
</div>
</div>
  <p style="font-family:cursive">Risebush is awesome! We do things and stuff. We have lots of employees working for us and are rolling in the cash as you read this!</p>
<p style="font-family:cursive">$$$$$ = life</p>
<img src="http://previews.123rf.com/images/pamparam/pamparam0705/pamparam070500006/908484-Rainbow-over-the-green-meadow-and-multicolored-bush-in-bloom-Stock-Photo.jpg" alt="Rainbow over a bush" style="width:304px;height:228px">
<div style="color:#21610B" >
<p></p>
<a href='#' class='button'>Become a member!</a>
</div>
<div style="color:#21610B">
<h1 align="center", style="font-family:cursive"><font size="5">Games</font></h1>
</div>
<p></p>
<div align="center"><embed src="http://www.classicgamesarcade.com/games/flappybirdflash.swf" width="475px" height="665px" autostart="true" loop="false" controller="true"></embed><br /><a href="http://www.classicgamesarcade.com/game/21741/flappy-bird-game.html">Play Flappy Bird</a></div>
<div id="footer">
<p>&copy2011 Risebush, Azhi Guore</p>
<p>All rights reserved. You may not claim to own Risebush, in any way, shape, or form, or claim that you created this website in any way possible, all rights go to the Risebush Company, owned by Azhi Guore.</p>
</body>

<style media="screen" type="text/css">

.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 14.5px 29px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   border-radius: 22px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 21px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }
#footer{
    clear: both;
    position: relative;
    bottom: -20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 95px;
    background-color: #3c4543;
}

#navbar {
        position:relative;
    margin-left:-350px;
    top:144px;
    left:50%;
}

#header {
    position:relative;
    top: -50px;
    background-color: #3c4543;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
ul{
    list-style-type: none;
    position: relative;
    margin: 50px;
}

li {
    display: inline;
    border: 2px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px 5px;
    background-color: #cc0323
}
</style>

</html>

该网站看起来不错,但页面右侧有一个巨大的空间。但是,我的编码中没有任何宽度参数,所以我不知道是什么导致了那个巨大的空间。有没有一种方法可以在不破坏网站布局的情况下将其删除?你知道是什么原因造成的吗?感谢您的帮助。

最佳答案

在野外检查您的代码时,我看到的唯一空间是 HTML 正文元素的默认边距。尝试添加 body { margin: 0; 到你的样式表。

关于html - html右侧的额外空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29134668/

相关文章:

javascript - 对于两个重叠的 Canvas ,我可以将鼠标事件传递给底部的 Canvas 吗?

css - 图片漂浮的烦恼

html - 单独文件中的 Css 不适用于 index.html

javascript - 纯 CSS 显示/隐藏 div 方式?

css - 段落中的文本在省略 <p> 标签时仅在 flexbox 中垂直居中,其背后的原因是什么?

javascript - 通过单击任意点上的 div 滚动到特定的 div

html - 保持文本内联

xml - 如何在由 XSLT 转换为 Excel 工作表的 XML 标记/元素中包含空格

java - 如何在正则表达式中允许空格?

javascript - 两个堆叠元素之间的额外空间