Agregue espacio entre elementos HTML solo usando CSS

El espacio entre el elemento HTML juega un papel crucial en los documentos. Es difícil para un usuario escanear rápidamente una página y determinar qué está vinculado y qué no si no hay brechas. Por lo tanto, es importante mantener un espacio entre todos los elementos en el documento. Para este propósito, existen diferentes métodos utilizados en cada idioma para agregar espacio entre los elementos, incluido CSS.

Este tutorial demostrará el método para agregar espacio entre elementos HTML utilizando propiedades CSS.

Cómo agregar/insertar espacio entre elementos HTML solo usando CSS?

Para agregar espacio entre elementos HTML solo usando CSS, utilice el "El elemento "para agregar datos a la página HTML. Luego, acceda al elemento y aplique "mostrar"Con los valores"red","ranura/columna de plantilla de cuadrícula", y "brecha"Propiedades CSS.

Para hacerlo, siga el procedimiento mencionado.

Paso 1: Haz un contenedor Div

Primero, utilice el "El elemento para hacer un contenedor Div en la página HTML. Además, inserte un atributo de clase y especifique un nombre para el elemento de clase para su uso posterior.

Paso 2: Crear contenedor Div anidado

A continuación, cree otro contenedor Div siguiendo el mismo procedimiento.

Paso 3: Agregue datos usando el elemento "SPAN"

Después de eso, usa el ""Elemento entre el contenedor DIV anidado para insertar datos:

Artículo 1
Artículo 2
Artículo 3





Artículo 4
Artículo 5
Artículo 6

Paso 4: contenedor de estilo "div"

Acceda al contenedor DIV principal con la ayuda del nombre de la clase como ".principal":

.principal
borde: 4px verde sólido;
relleno: 30px;
margen: 40px;

Luego, aplique las siguientes propiedades:

• "bordeLa propiedad se utiliza para especificar el límite alrededor del elemento.
• "relleno"Asigna el lado exterior espacial del elemento en un borde definido.
• "margen"Determina el espacio en una página HTML alrededor del borde definido.

Producción

Paso 5: Contenedor de estilo "Span"

Ahora, acceda al "durar"Contenedor y aplique las propiedades CSS mencionadas en el siguiente bloque de código:

durar
Border: 3px Groove Blue;
Color de fondo: RGB (240, 224, 137);
Text-Align: Center;

Aquí:

• "color de fondo"La propiedad define el color en la parte posterior del elemento.
• "texto alineado"Se utiliza para establecer la alineación del texto en el elemento definido.

Paso 6: Agregar espacio entre elementos en la columna

Ahora, utiliza el "identificación"Selector"#"Y el valor del" identificación"Para acceder al contenedor. Luego, aplique las propiedades declaradas a continuación para agregar espacio entre los elementos:

#columna
Pantalla: cuadrícula;
margen: 20px 40px;
Columna de plantilla de cuadrícula: repetir (relleno automático, auto);
Grid-gap: 14px;

Aquí:

• "mostrarLa propiedad determina el comportamiento de visualización del elemento de acceso. Para hacerlo, el valor de esta propiedad se establece como "red". El diseño de la cuadrícula CSS define un sistema de cuadrícula multidimensional para CSS.
• "columnas de plantilla de cuadrícula"Asigna el número y el tamaño de las columnas dentro del contenedor de la cuadrícula.
• "brecha"Agrega espacio entre elementos que solo funciona en elementos de la cuadrícula.

Paso 7: Agregue espacio entre elementos en filas

Ahora, acceda al contenedor DIV interno con la ayuda del valor de identificación y aplique las propiedades de CSS:

#ROWS
Pantalla: cuadrícula;
margen: 20px 40px;
Ranjas de plantilla de cuadrícula: repetir (relleno automático, auto);
Grid-gap: 20px;

Luego, aplique el "mostrar","margen","brecha", y "filas de la cuadrícula" propiedades. El "filas de la cuadrícula"Defina la altura y el número de las filas en un diseño establecido de la cuadrícula:

Has aprendido sobre agregar espacio entre elementos HTML con solo propiedades CSS.

Conclusión

Para agregar el espacio entre los elementos HTML solo con CSS, utilice el "El elemento "para agregar datos a la página HTML. Luego, acceda al elemento y aplique "mostrar"Con los valores"red","ranura/columna de plantilla de cuadrícula", y "brecha"Propiedades CSS que se utilizan. Este artículo ha explicado el procedimiento para agregar espacio entre elementos HTML solo usando CSS.