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
HTML
< división >< a href = “https://linuxhint.com/create-html-file/” > ¿Cómo crear un archivo HTML? < / a >
< a href = “https://linuxhint.com/edit-html-file/” > ¿Cómo editar un archivo HTML? < / a >
< / división >
La siguiente imagen muestra que los enlaces se han agregado con éxito:
Paso 2: Diseña el Div & Link
En este paso, diseñe el div y el enlace usando ' división ” en CSS. Ajustaremos el padding a “ 40px ” y establezca 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 “ punteado ” y color como “ RGB (251, 255, 0) ”.
CSS
división {relleno : 40px ;
tamaño de fuente : más grande ;
altura : 150px ;
antecedentes : negro ;
borde : 5px punteado RGB ( 251 , 255 , 0 ) ;
}
Usando el código anterior, se obtiene el siguiente resultado. Como puede ver, tanto el div como los enlaces tienen estilo:
Paso 3: dar 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: Usar HTML
Para dar espacio entre los enlaces sin escribir ningún CSS externo, puede usar ' ” en el HTML donde desea crear espacio. “ ” significa espacio sin rupturas. En el archivo HTML, agregar un significa un espacio. Si desea dar más espacio, no es preferible agregar manualmente según la cantidad de espacios requeridos.
¡Pasemos al ejemplo para entender el concepto indicado!
Ejemplo
Aquí, escribiremos cuatro veces “ ” para crear un espacio después del primer enlace de tal manera que el segundo enlace aparezca después de los cuatro espacios.
HTML
< división >< a href = “https://linuxhint.com/create-html-file/” > ¿Cómo crear un archivo HTML? < / a >
¿Cómo editar un archivo HTML?
Como puede ver, se crea un espacio en el lado derecho del primer enlace:
Método 2: Usar CSS
En CSS, usaremos el ' margen derecho ” propiedad para dar espacio entre dos enlaces. Los ' margen derecho La 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 margin-right se proporciona a continuación:
margen derecho : valorEn lugar de ' valor ”, establezca el margen desde el lado derecho del elemento. Sigamos con 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 derecho como ' 50px ”:
a {margen derecho : 50px ;
}
El espacio se crea desde el lado derecho del primer enlace, que se puede ver a continuación:
Paso 4: dar espacio entre dos enlaces verticalmente
Para dar espacio vertical entre dos enlaces, primero alinee los enlaces en forma vertical. Esto se hará usando el botón “ bloquear ” valor de la “ monitor ” 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 line-height como ' 80px ”:
a {monitor : bloquear ;
altura de la línea : 80px ;
}
Como puede ver, el espacio se crea utilizando la propiedad line-height:
¡Eso es todo! Hemos explicado el método de dar espacio entre dos enlaces en HTML y CSS.
Conclusión
Los ' ”, “ margen derecho ', y ' altura de la línea Las propiedades de CSS se utilizan para dar espacio horizontal y vertical entre dos enlaces. Con esto, puede ajustar el espacio desde los lados derecho e izquierdo de los enlaces. En este artículo, explicamos el procedimiento para dar espacio entre dos enlaces usando dos métodos diferentes y brindamos ejemplos relacionados.