htmlでちょっとだけ上に空白作る方法を伺ってよろしいでしょうか？

Question

お世話になっております。

グーグルで調査しても
私の調査能力が悪くて良い方法が見つからないため
質問失礼します。

<b style="line-height:200%;">◆項目1</b>

上をちょっと開けたいと思っており上記の方法がベストかな？と思っているのですが
line-height:200%;の底に”◆項目1”と表示したいのですが
指定方法が不明なので質問させて下さい。

ちなみに

<b style="margin-top:50px;border-top: 10px;padding-top:30px;">◆項目1</b>

は何故か効きませんでした。

line-height:200%;の底に”◆項目1”と表示の指定方法をお分かりな方お教え頂けますと嬉しく思います。

Comments

[Lhankor_Mhy]

周辺のHTMLをご提示いただけますか？

[m.ts10806]

「ちょっと」は人によって感覚が違います。また、bだけにline-heightを指定するのは変に思います。（通常は文章自体にあてるような・・・どうしてもそこだけというのなら仕方がないですが）　やりたい状態を図示された方がより的確な回答を得られますよ。

Answer 1

strongの方が推奨されています。

また、強調することが目的の場合は<STRONG>タグの使用が推奨されています。

上記リンクのように、spanなどにstyleを指定してfont-weightを調整して、あとはinline-blockでpaddingを設定しては？

a
<p>
xxxxx<span style="font-weight:bold;display:inline-block;padding-top:50px;background-color:#eee;">◆項目1</span>aaaaaa
</p>

実行結果：

※区別をつけやすいように背景色をつけています

とはいえ、質問の内容だけではスポットすぎて、どのやり方が適切か、解決につながるかは、やろうとしていることの全体像を提示いただかないと難しいのではないかと思います。

Comments

[moitaro]

ありがとうございます。
bタブではなくてspanでやってみるのが良いのですねっ
コメントありがとうございました。

Answer 2

bタグはinline要素であり、marginを左右にしか持てません。bタグの外側をblock要素で囲んで、そのblock要素にmargin-top等を持たせればよいと思います。

Comments

[moitaro]

ありがとうございます。
b　タグは左右にしか持てないのですねっ

[masaya_ohashi]

bタグが、ではなく、inline要素が、です。
b以外にもspanとかiとかいろいろありますので調べてください。

[moitaro]

ありがとうございます。
inline要素が　ですねっ
勉強しますっ

Answer 3

ブラウザの開発ツールで、効いている style を確認しながら変更してみるとイイですよ。
live で反映されるのでいろいろ試せます。

というか、試してみないと多分身につかないですよ。