CSSで画像間隔をキャンセルする方法-CSSチュートリアル-php.cn

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

藏色散人

リリース： 2020-12-17 16:36:17

オリジナル

4376 人が閲覧しました

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

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

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

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

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

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

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

ログイン後にコピー

効果:

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

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

ログイン後にコピー

効果:

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

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

<div   style="max-width:90%">
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
</div>

ログイン後にコピー

Effect:

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

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

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"   style="max-width:90%"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"   style="max-width:90%"/>

ログイン後にコピー

効果:

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

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

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

ログイン後にコピー

効果:

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