我正在创建一个网站。
我编写了html部分,现在我正在编写样式表。但是我的标题总是有一些空间。我无法删除它。
我的HTML和CSS代码如下。
<header>
<h1>OQ Online Judge</h1>
<form action="<?php echo base_url();?>/index.php/base/si" method="post">
<label for="email1">E-mail : </label><input type="text" name="email" id="email1">
<label for="password1">Password : </label><input type="password" name="password" id="password1">
<input type="submit" name="submit" value="Login">
</form>
</header>
这是我的HTML代码。
body{
margin: 0px;
padding: 0px;
}
header{
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
}
这是我的css代码。
尝试margin-top:
<header style="margin-top: -20px;">
...
编辑:
现在我发现相对位置可能是一个更好的选择:
<header style="position: relative; top: -20px;">
...
当您开始创建网站以重置所有边距和填充时,这是一种很好的做法。所以我建议开始只是简单的做:
* { margin: 0, padding: 0 }
这将使所有元素的边距和填充为0,然后您可以根据需要设置它们的样式,因为每个浏览器都有不同的默认边距和元素的填充。
我通过添加边框来解决空间问题,并通过设置负边距来移除。不知道底层问题是什么。
header {
border-top: 1px solid gold !important;
margin-top: -1px !important;
}
为了防止将来出现意外边距和其他特定于浏览器的行为,我建议在样式表中包含reset.css。
请注意,您必须设置h [1..6]字体大小和重量,以便在此之后再次将标题看作标题,以及许多其他内容。
只是为了完整性,将overflow
改为auto
/ hidden
也应该做到这一点。
body {
margin: 0px;
padding: 0px;
}
header {
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
overflow: auto;
}
<header>
<h1>OQ Online Judge</h1>
<form action="<?php echo base_url();?>/index.php/base/si" method="post">
<label for="email1">E-mail :</label>
<input type="text" name="email" id="email1">
<label for="password1">Password :</label>
<input type="password" name="password" id="password1">
<input type="submit" name="submit" value="Login">
</form>
</header>
它可能是导致问题的h1
标签。应用margin: 0;
应该解决问题。
但是你应该为每个新项目使用CSS重置来消除浏览器的一致性和像你这样的问题。可能最着名的是Eric Meyer的:http://meyerweb.com/eric/tools/css/reset/
这个css允许chrome和firefox正常渲染我页面上的所有其他元素,并删除我的h1标记上方的边距。此外,随着页面调整大小,em可以比px更好地工作。
h1 {
margin-top: -.3em;
margin-bottom: 0em;
}