CSSで画像間隔をキャンセルする方法

CSS で画像間隔をキャンセルする方法: まず HTML サンプル ファイルを作成し、次に img タグを介して 2 つの画像を挿入し、img タグの親に「font-size:0;」を書き込みます。最終的に設定 「display:block」属性を使用するだけです。

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: "css ビデオ チュートリアル "

img 画像間のギャップをキャンセルする方法

1. 複数の img を書き込むタグ 1 行内

<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>

効果:

<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/><img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>

効果:

##2. 画像内tag 親に書き込む: font-size:0;//これは表示の問題の解決にも役立ちます: inline-block

<div   style="max-width:90%">
   <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
   <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
</div>

Effect:

3. display: block を使用します (img はインライン要素です) // 浮動小数点数である必要があります

<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"   style="max-width:90%"/>
<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"   style="max-width:90%"/>

効果:

#4. 文字間隔を使用します属性

<div   style="max-width:90%"><!--letter-spacing的值无论是负多少都不会产生重叠-->
    <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
    <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
</div>

効果:

以上がCSSで画像間隔をキャンセルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。