Las imágenes se utilizan para mejorar la apariencia de las páginas web y para diseñarlas de manera efectiva. Como desarrollador web, HTML le permite agregar varias imágenes y diseñarlas en su sitio web. Sin embargo, estas imágenes están muy estrechamente espaciadas de manera predeterminada, pero puede personalizar el espacio con CSS de acuerdo con sus preferencias.

En este artículo, aprenderemos:

• Agregue espacio entre imágenes usando "red"
• Agregue espacio entre imágenes usando "doblar"
• Agregue espacio entre imágenes usando "margen"

Para crear espacio entre imágenes, primero, consulte el método para agregar imágenes en HTML, y luego crearemos espacio entre ellas.

Entonces empecemos!

Cómo agregar imágenes en div?

Para agregar imágenes en el DIV, primero, crearemos un contenedor utilizando el ""Etiqueta y asigne el nombre de clase como"div". Dentro de la etiqueta, agregaremos un encabezado

. A continuación, cree un nombre de clase Sub-Div como "img"En el que agregaremos seis imágenes usando la etiqueta y especificaremos la fuente de la imagen en ella.

Html

Agregar espacio entre imágenes

En el archivo CSS, use "div"Para acceder al contenedor creado en HTML. Ajustaremos la altura del Div como "auto"Para permitir que el DIV se organice automáticamente de acuerdo con sus elementos. Para diseñar el DIV, agregue el color de fondo como "RGB (170, 138, 172)"Y establece el ancho de la frontera como"10px", Estilo como"ranura", Y color como"RGB (77, 0, 80)". También estableceremos el color del encabezado como "RGB (77, 0, 80)".

CSS

div
Altura: Auto;
Antecedentes: RGB (170, 138, 172);
borde: 10px Groove RGB (77, 0, 80);
Color: RGB (77, 0, 80);

Aquí, puede ver que las imágenes se agregan en el DIV, pero no están organizadas y no tienen el mismo espacio entre ellas:

Ahora, crearemos espacio entre estas imágenes utilizando tres métodos diferentes.

Método 1: Agregue espacio entre imágenes usando "cuadrícula"

Para agregar espacio entre imágenes, use el CSS "mostrar"Propiedad y establece sus valores como"red", Que ajustará el elemento en un recipiente de cuadrícula.

Sintaxis

La sintaxis de la propiedad de visualización es:

Pantalla: cuadrícula;

Continuemos el ejemplo anterior y creemos espacio entre imágenes.

Ejemplo

Estableceremos el valor de la propiedad de visualización como "red"Para mostrar imágenes en forma de cuadrícula. Luego, cree tres columnas usando el "columnas de plantilla de cuadrícula"Propiedad y tres filas usando la"filas de la cuadrícula". Luego, establezca las fracciones como "1fr","1fr", y "1fr"Para filas y columnas, lo que significa que han adquirido un espacio igual. Después de eso, utilice el "brecha de columna" y "hilera"Propiedades para crear un espacio y establecer su valor como"25px":

img
Pantalla: cuadrícula;
columnas de plantilla de cuadrícula: 1fr 1fr 1fr;
Ranjas de plantilla de cuadrícula: 1fr 1fr 1fr;
ROWA-GAP: 25PX;
columna-gap: 25px;

Aquí, puede ver que el espacio se crea entre imágenes, pero cuando cambia el tamaño del navegador afecta el diseño de las imágenes:

Pasemos al segundo método!

Método 2: Agregue espacio entre imágenes usando "Flex"

Como parte de CSS, la propiedad de visualización se puede configurar en "doblar". Esta característica permite la flexibilidad y la capacidad de ajuste del contenido o elementos. También crea el mismo espacio entre los elementos, lo que permite que los elementos se organicen de manera eficiente.

Sintaxis

Pantalla: Flex

Según la sintaxis anterior, el valor de la propiedad de visualización se establece como "doblar".

Entonces, veremos el ejemplo para agregar espacio entre imágenes usando flex.

Ejemplo

Continuaremos el ejemplo anterior y estableceremos tres imágenes en el div. Después de eso, establezca el valor de la propiedad de visualización como "doblar"Y la brecha entre los íconos como"25px" utilizando el "brecha" propiedad:

.img
Pantalla: Flex;
Gap: 25px;

Puede observar que las imágenes están separadas por el espacio, pero cuando el navegador se redimensiona, las imágenes se cortan de los bordes:

Para superar la limitación mencionada anteriormente, el "margenSe utiliza la propiedad.

Método 3: Agregue espacio entre imágenes usando "margen"

Utilizando el "margenPropiedad, puede crear espacio entre imágenes en CSS. Agrega un área transparente alrededor de un elemento. Puede establecer el margen de los lados de un elemento izquierdo, derecho, superior e inferior. Más específicamente, es una propiedad en taquigrafía para "margen de pesa","margen de derecha","margen-top", y "margen". Todos los valores de las propiedades dadas se pueden configurar en una línea.

Sintaxis

La sintaxis de la propiedad de margen es:

Margen: Auto | Arriba a la parte inferior derecha a la izquierda

La descripción de la sintaxis proporcionada anteriormente se da a continuación:

• auto: Se utiliza para ajustar elementos de acuerdo con el navegador.
• arriba: Especifica el margen desde la parte superior.
• bien: Se usa para establecer el margen de la derecha.
• botón: Se usa para ajustar el margen desde la parte inferior.
• izquierda: Especifica el margen desde la izquierda.

Nota: Agregar dos valores especificará los márgenes desde la parte superior e inferior, así como desde la izquierda y la derecha; Sin embargo, agregar un valor aplicará el margen a los cuatro lados.

Continuando con el ejemplo anterior, ahora crearemos espacio entre imágenes.

Ejemplo

Aquí, usaremos "img"Para acceder a las imágenes agregadas en el HTML y establezca el ancho y la altura de las imágenes como"150px". Después de eso, estableceremos el margen como "0px", Margen-derecha como"10px", Margen-Bottom como"30px"Y margen-izquierda como"20px":

img
Ancho: 180px;
Altura: 180px;
margen: 0px 10px 30px 20px;

La salida dada demuestra que se crea el espacio y el diseño de las imágenes no se molesta, o las imágenes no se cortan cuando el navegador se redimensiona:

Eso es todo! Hemos explicado el método para agregar espacio entre imágenes utilizando tres métodos diferentes.

Conclusión

Se pueden usar tres métodos diferentes de CSS para crear espacios entre imágenes, a saber, el "red" y "doblar"Valores de la propiedad de visualización y la"margen" propiedad. Con estas propiedades, puede crear espacios entre imágenes. Sin embargo, la propiedad del margen CSS funciona mejor. En este manual, hemos explicado estos tres métodos en detalle y proporcionamos ejemplos para cada método.