商品ページ説明欄に＜br＞が入る

[ヤブタ]

お世話になります。素人が強引にhtml基礎知識で編集を行っております。

商品の「説明」箇所をコード編集するために「＜/＞（エディタを見る）」で表示切替を行ったところ、入れた覚えのない「＜br＞」が挿入されてしまいます。

【元の記述】
<div style="width: 5px; height: 27px; float: left; background-color: #cccccc;"></div>
<strong><span style="font-size: 16px;">　特長</span></strong>
<div style="border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid;"></div>
【＜br＞が挿入された記述】
<div style="width: 5px; height: 27px; float: left; background-color: #cccccc;"><br></div>
<strong><span style="font-size: 16px;">　特長</span></strong>
<div style="border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid;"></div>

このような現象が起きる原因として、どのようなことが考えられるでしょうか？
また、解決策はありそうなのでしょうか？
おそれいりますが、教えていただきたく、よろしくお願いいたします。

[Jizo_Inagaki · Accepted solution]

多くのエディタはそれぞれの設定に従いHTMLを整形するため、現在のHTML構造ではbrタグの挿入は防げないと思います。

他方、実現したい形が不明なので推測に基づきますが、「特徴」の横と下に線を引きたいのであれば以下のような方向性で構造とスタイリングを変更する方が良いと思われます。

<div style="border-bottom:1px solid #ccc; padding-bottom: 1em;">
<div style="font-size: 16px; padding:.5em 0 .5em .5em; border-left:5px solid #ccc;"><strong>特長</strong></div>
</div>

※同じ装飾を作る方法は他にいくつもありますので、上記は記載されたコードを基にした一例となります。

[ヤブタ]

質問者です。丁寧にご回答くださり、ありがとうございます。

「エディタ」を使用している以上どうしても入ってしまう、という理解で合っているでしょうか。

サンプルに頂いたものを調整してみようと思います。