Cómo dar espacio entre dos enlaces en HTML y CSS?

En HTML, los enlaces son hipervínculos que pueden llevarlo a otros sitios. Los enlaces generalmente conectan recursos web, como imágenes, videos, archivos PDF o páginas web. HTML usa el ""Etiqueta para crear enlaces especificando la URL y vinculando el texto. Cuando agrega dos enlaces en el HTML, de forma predeterminada, se colocan uno al lado del otro sin ningún espacio.

Este manual le enseñará el procedimiento para crear espacio entre dos enlaces.

Empecemos!

Cómo dar espacio entre dos enlaces en HTML y CSS?

Para dar espacio entre dos enlaces, en primer lugar, agregue los enlaces requeridos en el archivo HTML.

Paso 1: Agregar enlaces en HTML

En HTML, crearemos un contenedor usando la etiqueta y dos enlaces con la ayuda de la etiqueta. Aquí, se utiliza una referencia de hipervínculo para dar la dirección del sitio y para proporcionar el hipervínculo requerido. Además de la dirección, especifique el nombre del enlace porque el enlace no aparece en el sitio web. Solo mostrará el nombre o el título que asignamos.

Html

Cómo crear un archivo HTML?
Cómo editar un archivo HTML?

La siguiente imagen muestra que los enlaces se han agregado correctamente:

Paso 2: Estilizar el Div y el enlace

En este paso, diseñe el div y el enlace usando "div"En CSS. Ajustaremos el relleno a "40px"Y configure el tamaño de fuente de los enlaces como"más grande", La altura del div se establece como"150px"Y use la propiedad de fondo y establezca el color del DIV como"negro". Después de eso, ajuste el ancho del borde como "5px", Estilo como"discontinuos"Y el color como"RGB (251, 255, 0)".

CSS

div
relleno: 40px;
tamaño de fuente: más grande;
Altura: 150px;
Fondo: negro;
Border: 5px RGB DOND (251, 255, 0);

Usando el código anterior, se obtiene la siguiente salida. Como puede ver, tanto el DIV como los enlaces tienen el estilo:

Paso 3: Dé espacio entre dos enlaces horizontalmente

Podemos dar espacio entre dos enlaces horizontalmente usando HTML y CSS. Aquí, explicaremos ambos métodos uno por uno.

Método 1: Uso de HTML

Para dar espacio entre los enlaces sin escribir ningún CSS externo, puede usar ""En el HTML donde quieres crear espacio. ""Significa espacio no roto. En el archivo HTML, agregar uno significa un espacio. Si desea dar más espacio, no es preferible agregar manualmente de acuerdo con el número requerido de espacios.

Pasemos al ejemplo para comprender el concepto declarado!

Ejemplo

Aquí, escribiremos cuatro veces ""Para crear espacio después del primer enlace de tal manera que el segundo enlace aparecerá después de los cuatro espacios.

Html

Cómo crear un archivo HTML?
Cómo editar un archivo HTML?

Como puede ver, el espacio se crea en el lado derecho del primer enlace:

Método 2: Uso de CSS

En CSS, usaremos el "margen de derecha"Propiedad para dar espacio entre dos enlaces. El "margen de derechaLa propiedad se utiliza para agregar espacio desde el lado derecho del elemento. También puede establecer los valores negativos para ello.

Sintaxis

La sintaxis de la propiedad de margen-derecha se proporciona a continuación:

margen-derecha: valor

En lugar de "valor", Establezca el margen desde el lado derecho del elemento. Continuemos el ejemplo.

Ejemplo

Aquí, usaremos "a"Para acceder al enlace que hemos creado en el HTML. A continuación, establezca el valor de la propiedad de margen-derecha como "50px":

a
margen-derecha: 50px;

El espacio se crea desde el lado derecho del primer enlace, que se puede ver a continuación:

Paso 4: Dale espacio entre dos enlaces verticalmente

Para dar espacio vertical entre dos enlaces, primero alinee los enlaces en forma vertical. Esto se hará usando el "bloquear"Valor del"mostrar"Propiedad y luego usando el"altura de la línea"Propiedad para dar espacio entre dos líneas de enlace.

Ejemplo:

Aquí, estableceremos el valor de la propiedad de visualización como "bloquear"Para alinear los enlaces verticalmente. Luego, proporcione el espacio entre dos enlaces estableciendo el valor de la propiedad de altura de línea como "80px":

a
bloqueo de pantalla;
Línea de altura: 80px;

Como puede ver, el espacio se crea utilizando la propiedad Line-Alcho:

Eso es todo! Hemos explicado el método de dar espacio entre dos enlaces en HTML y CSS.

Conclusión

El "","margen de derecha", y "altura de la líneaLas propiedades de CSS se utilizan para dar espacio horizontal y vertical entre dos enlaces. Usando esto, puede ajustar el espacio desde los lados derecho e izquierdo de los enlaces. En este artículo, hemos explicado el procedimiento para dar espacio entre dos enlaces utilizando dos métodos diferentes y proporcionados ejemplos relacionados.