ホームページ > ウェブフロントエンド > H5 チュートリアル > H5 の写真のギャップを解決する方法

H5 の写真のギャップを解決する方法

php中世界最好的语言
リリース: 2018-01-12 10:01:18
オリジナル
2945 人が閲覧しました

今回は、H5の写真のズレを解決する方法と、H5の写真のズレを解決するための注意点

を紹介します。以下は実際のケースですので、見てみましょう。

最近、h5 プロジェクトに取り組んでいたところ、いくつかの img タグの間に約 3px の隙間がありました

その後、Baidu で確認したところ、原因はブラウザの要素が処理されているためであることがおおよそわかりました。単語として、ギャップはいくつかの文字のために予約されており、それらを整列させた後でも少し大きくなります (j、g など)。個人的なテストに適した解決策もいくつか見つけました。

1. body の font-size
を 0 に設定します。これを行うときは、以下の div を記述するときに要素のフォント サイズを指定することを忘れないでください。

2.

<img src="assets/img/turntable/lucky-turntable_07.jpg">
  <img src="assets/img/turntable/lucky-turntable_11.png" >
  <img src="assets/img/turntable/lucky-turntable_08.jpg">
ログイン後にコピー

<img src="assets/img/turntable/lucky-turntable_07.jpg"><img src="assets/img/turntable/lucky-turntable_11.png"><img src="assets/img/turntable/lucky-turntable_08.jpg">
ログイン後にコピー

と書きます。つまり、img タグを同じ行にスペースを入れずに書きます。

これらの事例を読んだ後は、この方法を習得したと思います。 php 中国語ウェブサイト その他の関連記事にご注意ください。

関連記事:

H5 でビデオタグとオーディオタグとプログレスバーを使用する方法


H5 と C3 の新しいインタラクティブ機能とは何ですか


H5 のブロックレベルタグの概要

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート