インライン要素のソース中での改行の問題

HTML&CSS

インライン要素の途中で改行を行うと半角スペースが入ります。

以下の文章で「名前は」で改行したとします。

<p>吾輩(わがはい)は猫である。名前は
まだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。</p>

吾輩(わがはい)は猫である。名前は まだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。
「名前は」の後に半角のスペースが入っていることが分ります。これは「インライン要素の途中で改行を行うと半角スペースが入る」仕様です。

これと同様の事がimg要素を使用しても起こります。

以下が例です。

<img src="hana1.jpg" width="150" height="112" />
<img src="hana2.jpg" width="150" height="100" />

hana1 hana2
画像と画像の間に隙間が空いています。
これはimgのマージンやパディングを0にしても同様です。

ではimgタグを改行しなければどうなるか。

<img src="hana1.jpg" width="150" height="112" /><img src="hana2.jpg" width="150" height="100" />

hana1hana2

半角スペースは無くなります。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました