33

ウェブサイトを作成しています。

HTML 部分を作成し、現在はスタイルシートを作成しています。しかし、ヘッダーの上には常にスペースがあります。どうすれば削除できますか?

私のHTMLとCSSコードを以下に示します。

body{
  margin: 0px;
  padding: 0px;
}

header{
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}
<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>

4

8 に答える 8

68

試す：

h1 {
    margin-top: 0;
}

マージンの崩壊の影響が見られます。

于 2013-01-20T11:04:09.233 に答える
12

マージントップを試してください：

<header style="margin-top: -20px;">
    ...

編集：

今、私は相対的な位置がおそらくより良い選択であることがわかりました:

<header style="position: relative; top: -20px;">
    ...
于 2013-01-20T11:08:45.663 に答える
9

Web サイトの作成を開始するときは、余白とパディングをすべてリセットすることをお勧めします。したがって、単純な実行を開始することをお勧めします。

* { margin: 0, padding: 0 }

これにより、すべての要素のマージンとパディングが 0 になり、ブラウザごとに要素のデフォルトのマージンとパディングが異なるため、必要に応じてスタイルを設定できます。

于 2013-01-20T11:10:02.713 に答える
5

境界線を追加してスペースの問題を解決し、負のマージンを設定して削除しました。ただし、根本的な問題が何であるかはわかりません。

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}
于 2015-09-22T13:58:04.467 に答える
4

完全を期すために、/に変更overflowしてもうまくいくはずです。autohidden

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>

于 2015-10-10T10:17:54.930 に答える
4

今後、予期しないマージンやその他のブラウザー固有の動作を防ぐために、スタイルシートにreset.cssを含めることをお勧めします。

h[1..6] のフォント サイズと太さを設定して、その後見出しを再び見出しのように見せる必要があることに注意してください。

于 2013-01-20T17:40:01.240 に答える
2

おそらくh1タグが問題の原因です。適用margin: 0;すると問題が解決するはずです。

ただし、新しいプロジェクトごとに CSS リセットを使用して、ブラウザの一貫性と問題を解消する必要があります。おそらく最も有名なのは Eric Meyer のものです: http://meyerweb.com/eric/tools/css/reset/

于 2013-01-20T17:33:42.157 に答える