HTMLで画像間の間隔を調整する方法

html では、margin-left 属性または margin-right 属性を使用して画像間の間隔を調整できます。これら 2 つの属性は、それぞれ要素の左マージンと右マージンを設定できます。「margin」を追加するだけです。 - 「left:value;」または「margin-right:value;」スタイルで十分です。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

html で画像間の間隔を調整する

新しい HTML ファイルを作成し、test.html という名前を付けます。test.html ファイル内で div を作成し、そのファイル名を設定します。クラス属性は dd です。

div 内に img タグを使用して 2 つの画像を作成します。画像名はそれぞれ 1.jpg と 3.jpg です。

明らかな効果を示すために、div のスタイルを設定します。 div の幅を 600px、高さを 500px に設定し、中央に配置し、1px の灰色の境界線を設定します。

test.html ファイルで、margin 属性を使用して 2 つの画像間の距離を設定します。たとえば、画像 1.jpg と画像 3.jpg の間の距離を 30 ピクセルに設定するには、margin-right 属性を使用して設定できます。

さらに、マージンを使用して画像の上、下、左のマージンを設定することもできます。

• margin-left: 左マージン;

• margin-top: 上マージン;

• margin-bottom: 下マージン。

たとえば、margin-left を使用して画像 3.jpg の左マージンを 30 ピクセルに設定すると、前の手順の効果を得ることができます。

マージン 画像の四辺すべてのマージンを「上、右」の順に同時に設定することもできます。例えば、画像1を設定します。jpgの「上、右、下、左」の外側の余白は、10px、20px、30px、40pxです。

推奨チュートリアル: 「html ビデオ チュートリアル 」

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