web-dev-qa-db-ja.com

HTMLヘッダーの上のスペース（マージン）を削除するにはどうすればよいですか？

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

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コードです。

csshtml5marginhtml-heading
22
eddard.stark

試してください：

h1 {
    margin-top: 0;
}

margin collapsing の効果が見られます。

50
robertc

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

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

編集：

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

<header style="position: relative; top: -20px;">
    ...
8
benbai123

Webサイトの作成を開始して、すべてのマージンとパディングをリセットすることをお勧めします。だから、私は単純なことだけを開始することをお勧めします：

* { margin: 0, padding: 0 }

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

6
Панайот Толев

境界線を追加することでスペースの問題を解決し、負のマージンを設定することで削除しました。しかし、根本的な問題が何であるかわからない。

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}
3
Patrick van Efferen

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

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

2
D_4_ni

完全を期すために、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>
2
yckart

おそらくh1タグが問題の原因です。申請中 margin: 0;は問題を修正するはずです。

ただし、新しいプロジェクトごとにCSSリセットを使用して、ブラウザーの一貫性と問題を解消してください。おそらく最も有名なものはエリック・マイヤーのものです： http://meyerweb.com/eric/tools/css/reset/

0
Rudolf

このcssでは、chromeとfirefoxでページ上の他のすべての要素を通常どおりレンダリングし、h1タグの上の余白を削除できました。

h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}
0
user3139574