写真間のギャップを修正する方法

h プロジェクトでは、いくつかの img タグの間に約 3px の隙間があり、効果が非常に悪いです。以下のエディターは、HTML5 の画像間のギャップに対する完璧な解決策を共有します。それが必要な友人は、それがすべての人に役立つことを願っています。

最近h5プロジェクトに取り組んでいるときに、いくつかのimgタグの間に約3pxのギャップがあるという不可解な問題に遭遇しました

写真に示すように:

後でBaiduで確認しました。 , 理由は大まかに理解できます。ブラウザは要素を単語として扱い、整列後にまだ少し伸びる一部の文字 (j、g など) のためにギャップが予約されているからです。個人的なテストに適した解決策もいくつか見つけました。

1. 本文の font-size を 0 に設定します。

これを行う場合、以下の p を記述するときに要素のフォント サイズを指定することを忘れないでください。

2.

  <img  src="assets/img/turntable/lucky-turntable_07.jpg" alt="写真間のギャップを修正する方法" >
    <img  src="assets/img/turntable/lucky-turntable_11.png"  alt="写真間のギャップを修正する方法" >
    <img  src="assets/img/turntable/lucky-turntable_08.jpg" alt="写真間のギャップを修正する方法" >

を

<img  src="assets/img/turntable/lucky-turntable_07.jpg" alt="写真間のギャップを修正する方法" ><img  src="assets/img/turntable/lucky-turntable_11.png" alt="写真間のギャップを修正する方法" ><img  src="assets/img/turntable/lucky-turntable_08.jpg" alt="写真間のギャップを修正する方法" >

と書きます。つまり、imgタグを真ん中にスペースを入れずに書きます

。急いで試してみてください。

関連する推奨事項:

CSS を使用して画像の高さを自動的に拡大縮小する方法

HTML に画像を挿入する方法

CSS の外側マージンの使用方法の詳細な説明

以上が写真間のギャップを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。