blocks|key|396337|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396338|h1+{
++++margin-top:+0;
}|code-block|syntax|javascript|396339|您已经看到了margin+collapsing的效果。|offset|length|396340|entityMap|0|LINK|mutability|MUTABLE|url|http://reference.sitepoint.com/css/collapsingmargins^0|0|0|6|H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Try:</p>

<pre><code>h1 {
    margin-top: 0;
}
</code></pre>

<p>You're seeing the effects of <a href="http://reference.sitepoint.com/css/collapsingmargins">margin collapsing</a>.</p>


blocks|key|178490|text|尝试页边距-顶部：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178491|<header+style="margin-top:+-20px;">
++++...|code-block|syntax|javascript|178492|编辑：|178493|现在我发现相对位置可能是更好的选择：|178494|<header+style="position:+relative;+top:+-20px;">
++++...|178495|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try margin-top:</p>

<pre><code>&lt;header style="margin-top: -20px;"&gt;
    ...
</code></pre>

<p>Edit:</p>

<p>Now I found relative position probably a better choice:</p>

<pre><code>&lt;header style="position: relative; top: -20px;"&gt;
    ...
</code></pre>


blocks|key|178568|text|这是一个很好的做法，当你开始创建网站时，重新设置所有的页边距和填充。因此，我建议在开始时只做简单的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178569|*+{+margin:+0,+padding:+0+}|code-block|syntax|javascript|178570|这将使所有元素的边距和填充都为0，然后您可以随心所欲地设置它们的样式，因为每个浏览器都有不同的元素的默认边距和填充。|178571|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It is good practice when you start creating website to reset all the margins and paddings. So I recommend on start just to simple do:</p>

<pre><code>* { margin: 0, padding: 0 }
</code></pre>

<p>This will make margins and paddings of all elements to be 0, and then you can style them as you wish, because each browser has a different default margin and padding of the elements. </p>


blocks|key|396455|text|可能是h1标签导致了问题。应用margin:+0;应该可以解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|396456|但是，您应该对每个新项目使用CSS重置，以消除浏览器一致性和类似您的问题。最著名的可能是Eric+Meyer的：http://meyerweb.com/eric/tools/css/reset/|396457|entityMap|0|LINK|mutability|MUTABLE|url|http://meyerweb.com/eric/tools/css/reset/^0|3|2|F|A|0|1K|15|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>It is probably the <code>h1</code> tag causing the problem. Applying <code>margin: 0;</code> should fix the problem.</p>

<p>But you should use a CSS reset for every new project to eliminate browser consistencies and problems like yours. Probably the most famous one is Eric Meyer's: <a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/</a></p>


blocks|key|178640|text|为了防止将来出现意外的页边距和其他特定于浏览器的行为，我建议在样式表中包含reset.css。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|178641|请注意，您必须设置h1..6字体大小和粗细，以使标题在此之后再次看起来像标题，以及许多其他内容。|178642|entityMap|0|LINK|mutability|MUTABLE|url|http://meyerweb.com/eric/tools/css/reset/reset.css^0|11|9|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>To prevent unexpected margins and other browser-specific behavior in the future, I'd recommend to include <a href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="nofollow">reset.css</a> in your stylesheets.</p>

<p>Be aware that you'll have to set the h[1..6] font size and weight to make headings look like headings again after that, and many other things.</p>


blocks|key|396522|text|我通过添加边框和设置负边距来删除，从而解决了空间问题。我不知道潜在的问题是什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396523|header+{
++border-top:+1px+solid+gold+!important;
++margin-top:+-1px+!important;
}|code-block|syntax|javascript|396524|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I solved the space issue by adding a border and removing is by setting a negative margin. Do not know what the underlying problem is though.</p>

<pre><code>header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}
</code></pre>


blocks|key|178688|text|为了完整起见，将overflow更改为auto/hidden也可以做到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|178689|​|178690|body+{
++margin:+0px;
++padding:+0px;
}

header+{
++margin:+0px;
++padding:+0px;
++height:+20em;
++background-color:+#C0C0C0;
++overflow:+auto;
}|code-block|syntax|javascript|178691|<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>|178692|178693|entityMap^0|8|8|J|4|O|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>Just for completeness, changing <code>overflow</code> to <code>auto</code>/<code>hidden</code> should do the trick too.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
  overflow: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  &lt;h1&gt;OQ Online Judge&lt;/h1&gt;

  &lt;form action="&lt;?php echo base_url();?&gt;/index.php/base/si" method="post"&gt;
    &lt;label for="email1"&gt;E-mail :&lt;/label&gt;
    &lt;input type="text" name="email" id="email1"&gt;
    &lt;label for="password1"&gt;Password :&lt;/label&gt;
    &lt;input type="password" name="password" id="password1"&gt;
    &lt;input type="submit" name="submit" value="Login"&gt;
  &lt;/form&gt;
&lt;/header&gt;</code></pre>
</div>
</div>
</p>


blocks|key|178717|text|这个css允许chrome和firefox正常地在我的页面上呈现所有其他元素，并删除我的h1标签上方的空白处。此外，当页面调整大小时，em可以比px工作得更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178718|h1+{
++margin-top:+-.3em;
++margin-bottom:+0em;
}|code-block|syntax|javascript|178719|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This css allowed chrome and firefox to render all other elements on my page normally and remove the margin above my h1 tag. Also, as a page is resized em can work better than px.</p>

<pre><code>h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}
</code></pre>


<p>I am creating a website.</p>

<p>I have written the HTML part and now I am writing the stylesheet. But there is always some space above my header. How can I remove it?</p>

<p>My HTML and CSS code is given below.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  margin: 0px;
  padding: 0px;
}

header{
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  &lt;h1&gt;OQ Online Judge&lt;/h1&gt;
  &lt;form action="&lt;?php echo base_url();?&gt;/index.php/base/si" method="post"&gt;
    &lt;label for="email1"&gt;E-mail : &lt;/label&gt;&lt;input type="text" name="email" id="email1"&gt;
    &lt;label for="password1"&gt;Password : &lt;/label&gt;&lt;input type="password" name="password" id="password1"&gt;
    &lt;input type="submit" name="submit" value="Login"&gt;
  &lt;/form&gt;
&lt;/header&gt;</code></pre>
</div>
</div>
</p>


How can I remove space (margin) above HTML header?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在创建一个网站。我已经编写了HTML部分，现在我正在编写样式表。但是在我的头上总是有一些空格。怎样才能删除它？我的HTML和CSS代码如下所示。​body{  margin: 0px;  padding: 0px;}header{  margin: 0px;  padding: 0px;  height: 20em...

问如何删除HTML标题上方的空格(页边距)？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除HTML标题上方的空格(页边距)？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除HTML标题上方的空格(页边距)？
EN