スタイルシートを使って線を引きたいのですが

質問

区切り線（横線）を入れたいのですが上下の余白が多すぎて
行間が空きすぎるのでスタイルシートで出来るみたいなのですが
色々調べたのですが良くわかりませんのでよろしくお願いします。

回答No.5

noname#56882 · ベストアンサー

#2、#3です。
<p>ああああ</p>
<hr>
<p>ああああ</p>　←こちらの<p>と</p>も外されました？

<p>は段落の意味ですから入れると必然的に<p>～</p>の前後に1行分改行されてしまいますよ。

お礼

はい、下も外しましたが駄目なんです
下だけが余白が小さくならないのです

補足

すいません、朝再度やってみたら下記のとおりで出来ました
hr {margin: 0px;}

どうも、ありがとうございました。

回答No.4

dezimac

もしかして、hr以外の要素のマージンが働いていませんか？

<p>ああああ</p>
<hr>
<p>ああああ</p>

とかなっていれば、いくらhrのマージンを調整しても、pのマージンで空白できますよ。

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

とスタイルシート設定すれば、body内の全ての要素でマージンもパディングも無効になります。
こうしておいて、マージンやパディングが必要な要素だけを設定した方が楽かもしれません。

お礼

回答ありがとうございます
確かにいわれるとおり
<p>ああああ</p>
<hr>
<p>ああああ</p>
になってました
しかし外しても上は余白が小さくなりましたが
下はそのままです。
よろしくお願いします

補足

これはHRの位置を表すのではないですか？
たとえば、hr {margin: 10px;}すると
上の余白は変わっても下の余白は変わらないです
よろしくお願いします

回答No.3

noname#56882

#2です。駄目でしたか…。
No.2のCSSだけの記述ですと余白が大きくなりすぎることはないので
たぶん他に書かれているCSSと関係しているのかもしれません。
その辺りを調べてみるといいかもしれませんよ。

お礼

わかりました
ありがとうございました

回答No.2

noname#56882

CSS記述例
hr {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: gray;
height: 1px;
}

HTML記述例
テキストテキスト
<hr>
テキストテキスト

では駄目でしょうか。
marginやpaddingを入れるとますます空白があいてしまうので一切無しにしてみました。

お礼

やはりダメみたいです
あきらめます
ありがとうございました

回答No.1

dezimac

HTMLで区切り線なら、<hr>タグをです。
スタイルシートで、空きが気になるならhrのマージンを調整すればいいです。

例）
hr {
margin: 5px;
}

単純に見た目だけの線を引きたいなら、スタイルシートのborderを使えば出来ます。
http://www.htmq.com/style/border.shtml

hrタグと違ってこの場合はスタイルシート解除したら表示されませんが。

お礼

早速の回答ありがとうございます
hr {margin: 5px;}
をcssに追加するだけでよいのですねよ
余白小さくならないんですが・・・
よろしくお願いします

補足

ホームページビルダーを使ってるんですが
CLASSでマージンとパディングを０に指定してみたのですが
余白は小さくなりません。
どこが間違っているのか・・・
よろしくお願いします