<h1>タグを使うとレイアウトが

質問

初歩的なことで申し訳ありません
HTMLをはじめ他ばかりで右も左も解らない状態です

ヘッダー枠の中に<h1>タグを入れタイトルを表示させるとヘッダー枠のマージンがおかしくなりレイアウトが微妙におかしくなります
<h>系のタグでは全ておかしくなるのですが、どうしてでしょうか？

改善するにはどうしたらいいでしょうか？

回答No.4

takumana20 · ベストアンサー

#3です。お礼受け取りました。よく見たら訂正があります。
例
<H1 style="margin: 10px 11px 12px 13px; padding: 10px 11px 12px 13px;">

が正しいです┐(´ー｀)┌
前項の数値px列をコピペしたら間違っちゃったｗ

回答No.3

takumana20

ブラウザやHTMLのバージョンでも違うようです・・・
見出しH1やH2は、外周と内周の幅が作られます。
見出しって目立ちますよね？　だから見出しだと思います。
私も最初苦労しました(T_T)（CSSも知らない時）
CSSは、見た目を調整する役割が多いのでtekito-MAXさんには丁度良いでしょう。
回答者のみなさんが書いたCSSですが、使い方が３通りあります。

一番簡単な方法が、HEAD内に
<meta http-equiv="Content-Style-Type" content="text/css">
を入れておいて
例
<H1 style="margin: 10px 11px 12px 13px; padding: margin: 10px 11px 12px 13px;">
見出し</H1>
これで１個１個毎に100pxとかに試しに大きく調整してみて下さい。
違いがわかりますよ。
解説は、margin 外側の幅　padding 内側の幅
左の数値から　上幅　右幅　下幅　左幅

マウスカーソウルでなぞると色が反転しますので見えない幅がわかります。

font-size: 1.5em;　とかで大きさも調整できます。
慣れてきたらCSSファイルを作ってHTMLにリンクさせると良いです。

お礼

回答ありがとうございました。
<h>は外周が勝手に入っているんですか、納得です

回答No.2

yambejp

><h>系のタグでは全ておかしくなるのです

おかしくなるのではありません。
見出しとして機能しているのです。

>改善するにはどうしたらいいでしょうか？

変更することはできても改善ではないですね（ある意味改悪）

スタイルシートという仕組みで調整します。
具体的にどうしたいかによりますがたとえば、ページの頭の方に
<style>
h1{
margin:0px;
paddgin:0px;
}
</style>
などと書いておく、だいぶ見え方がかわると思います

お礼

回答ありがとうございました

回答No.1

mochitora

ブラウザ(の種類/バージョン)によって、
マージン/パディングの出方が違ってきますので、
なにもしないと、思うようにレイアウトできない、
ということがよくあります。
気になる場合はスタイルシートで「0(px)」にしてしまうと良いです。

1ファイル1ファイル、
いちいちHTMLファイルに0pxと書き込むのも大変なので、
外部スタイルシートを別につくり、
まとめて調節するのが簡単です。

お礼

回答ありがとうございました