Maison > interface Web > tutoriel CSS > Comment définir l'intervalle entre les images avec CSS

Comment définir l'intervalle entre les images avec CSS

藏色散人
Libérer: 2023-01-04 09:38:30
original
10473 Les gens l'ont consulté

Comment définir l'intervalle entre les images en CSS : créez d'abord un nouveau fichier html ; puis créez un div, et utilisez la balise img pour créer deux images dans le div, enfin, utilisez l'attribut margin pour définir la distance ; entre les deux images Juste de la distance.

Comment définir l'intervalle entre les images avec CSS

L'environnement d'exploitation de ce tutoriel : ordinateur Dell G3, système Windows 7, version HTML5&&CSS3.

Recommandé : "Tutoriel vidéo CSS"

Comment définir la distance entre deux images en CSS

Créer un nouveau un fichier HTML, nommé test.html, est utilisé pour expliquer comment définir la distance entre deux images en CSS.

Comment définir lintervalle entre les images avec CSS

Dans le fichier test.html, créez un div et définissez son attribut de classe sur dd, qui sera utilisé pour définir le style CSS du div ci-dessous.

Comment définir lintervalle entre les images avec CSS

Dans le div, utilisez la balise img pour créer deux images, les noms d'image étant respectivement 1.jpg et 3.jpg.

Comment définir lintervalle entre les images avec CSS

Afin de montrer des effets évidents, stylisez le div. Définissez la largeur du div sur 600 px, la hauteur sur 500 px, centrez-la et définissez une bordure grise de 1 px.

Comment définir lintervalle entre les images avec CSS

Dans le fichier test.html, utilisez l'attribut margin pour définir la distance entre les deux images. Par exemple, pour définir la distance entre l'image 1.jpg et l'image 3.jpg sur 30 px, vous pouvez utiliser l'attribut margin-right pour la définir.

Comment définir lintervalle entre les images avec CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal