1:ID:DiVWIs 1週間前

#質問:特定部分だけ、段落の高さに一致させ、背景色を定義する方法 html初心者のため、御教授頂けますと幸いです。

現在、下のリンク先に保存しました参考図のように、
段落内のある特定の箇所に、段落の高さと一致した帯を入れる方法が解らず、困っております。
https://www.fastpic.jp/viewer.php?file=0991469567.png

私は、試しに全角空白を入力し、その空白の背景の色を定義したのですが(例えば赤)、
その空白フォントの背景部分だけが色の定義がされ、
段落の高さとは一致せず、空白文字と段落高さの間に隙間が空いてしまい、大変不格好になってしまいました。

添付図のように、段落幅にうまく一致させれる方法がございましたら、どなたか御教授賜れますと幸いです。

以上、よろしくお願い致します。

2 件のコメント

2:ID:6oeNlG 1週間前
色々方法はありますが、borderプロパティを使うのが早いと思います。
全角空白で着色された部分がインラインレベル要素、枠の部分がブロックレベル要素といいます。
段落幅に一致させる記述はブロックレベル要素に使える記述を使うとよいかと思います。
─────
<a href="#" style="display:block; padding:5px 10px; border-left: 5px solid #F00;">御堂筋線</a>
─────
3:ID: 1週間前
Re:2
早速のご回答、ありがとうございました!

確かに、段落の高さ幅にあった帯を入れれました。

記載頂いた内容、改めてキチンと理解するようにいたします。

ご回答方、誠にありがとうとざいました。
コメントの受付は終了しました。

一緒に読まれているつぶやき

ページ上部に戻る