画像からHTMLテキストを分離するために垂直線を引く方法

HTMLは、水平線のようにきれいな縦線の解決策を提供していません。

1。

テキスト内に画像を設定して、「style」属性タグを追加してください。 たとえば、画像のHTMLコードは次のようになります。

2。

「style」属性内に境界線を定義します。 たとえば、境界線を画像全体に適用する場合、CSSは次のようになります。

これは簡単なボーダー設定です - 最初の値はボーダーの幅を設定し、2番目はボーダーのタイプを定義し、3番目は色を設定します。 境界線は、実線、点線、破線、または二重にすることができます。 または、溝、尾根、インセット、アウトセットなどの3-D境界を指定することもできます。

真の垂直線を作成するために境界線を片側だけに適用する場合は、 "border"の代わりに "border-left"または "border-right"を使用します。

3。

画像とテキストの間にスペースを入れるためにパディングを追加します。 境界線を画像から5ピクセル離したい場合は、「padding：5px;」を追加します。 あなたのスタイルタグに。 たとえば、 "padding-left：5px;"のようにして、片側だけでパディングを指定できます。 枠線とテキストの間にスペースを作成する場合は、余白を使用してください。 また、 "src"タグの画像のURLを指定する必要があります。 まとめると、コードは次のようになります。

4。

HTMLを保存してテストし、意図したとおりに境界線が表示されていることを確認します。