文章をspanタグの文章より内側に表示したい。

Question

前提・実現したいこと

HTML/CSSを使用して、WEB作成を行っています。
下記のようなコードを書くと、spanタグで指定した部分が内側に入ってしまい、かきくけこ～の部分がspanタグより前に出てしまいます。
どうすれば内側に入れることが出来ますか？
HTML内

<p> <span class=title>・あいうえお</span><br> かきくけこさしすせそ<br> <span class=title>・たちつてと</span> </p> と記入し、 CSS内 *｛ 　　　margin:10px 5px 10px 5px; ｝ .title{ background-color:gray; }

Comments

[hoshi-takanori]

すべてのタグにマージンをつけてるからでは。普通そんなことしませんよね…。

[YukoOkuzono]

ありがとうございます！！なるほど！勉強になりました！！

Answer 1

補足欄にhoshi-takanoriさんが書かれているとおり、全部にマージンをつけているのが原因だと思います。
解決方法ですが、たとえば、打ち消しをすれば解消されるのではないかと思います。

.title{
background-color:gray;
margin:0;
}

---

なお、リストを書きたいのであれば、適切なマークアップが他にありますのでご検討ください。
<ul>: 順序なしリスト要素 - HTML: HyperText Markup Language | MDN

Comments

[YukoOkuzono]

なるほど！！
教えて下さりありがとうございます。
したかった事なんですが、ホームページ全体の横に余白を作りたく、全部にmarginをつけてしまったのですが、違った様です。。。解決策まで提案して下さり本当にありがとうございます。調べてもわからず、泣きたい気分だったので本当に嬉しいです。