En HTML, los botones son elementos que se pueden hacer clic para realizar una acción específica. La mayoría de los botones se colocan cerca uno del otro, pero puede dar espacio entre dos botones utilizando la propiedad de margen de CSS. Para esto, puede usar la propiedad de margen-izquierda o la propiedad de margen-derecho.

En este artículo, aprenderá cómo dar espacio entre dos botones con la ayuda de CSS. Pero, primero, aprenda sobre las propiedades de margen-izquierda y margen-derecha uno por uno. Entonces, comencemos!

¿Qué es la propiedad CSS de "margen-izquierda"??

En CSS, "margen de pesaLa propiedad se utiliza para crear espacio desde el lado izquierdo de los elementos. El elemento estará más lejos de sus vecinos si el valor es positivo, mientras que se acerca a sus vecinos si el valor especificado es negativo.

Sintaxis

La sintaxis de la propiedad de margen-izquierda es la siguiente:

margen izquierda: valor

En lugar de "valor", Establezca el margen que desea dar al elemento desde el lado izquierdo.

¿Qué es la propiedad CSS "margen-derecha"??

El "margen de derechaLa propiedad de CSS se utiliza para crear espacio desde el lado derecho del elemento. Coloca el área de margen en el lado derecho del elemento. El valor predeterminado de la propiedad de margen-derecha se establece como cero; Sin embargo, puede especificar valores positivos y negativos para ello.

Sintaxis

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

margen-derecha: valor

Colocar el "valor"Que desea establecer como margen desde el lado derecho del elemento.

Cómo dar espacio entre dos botones?

Puede crear espacio entre dos botones usando el "margen de pesa" y "margen de derecha" propiedades. Para hacerlo, en la sección HTML, agregaremos un encabezado usando

y crear dos botones con el nombre de la clase "BTN1" y "btn2", Respectivamente.

Html

Crear espacio entre dos botones

Haz click en mi
Haz click en mi

El resultado predeterminado del código dado es:

Ahora, muévase al CSS para crear espacio entre estos dos botones.

Ejemplo 1: Dar espacio entre dos botones usando propiedad de margen-derecha

Aquí, usa ".BTN1"Para acceder al primer botón agregado en el HTML y establezca el valor de la propiedad de margen-derecha como"100px".

CSS

.btn1
margen-derecha: 100px;

Como puede ver, el espacio se crea en el lado derecho del primer botón:

En el siguiente ejemplo, usaremos el "margen de pesaPropiedad para crear espacio entre dos botones.

Ejemplo 2: Dar espacio entre dos botones usando propiedad de margen izquierda

Usaremos ".btn2"Para acceder al segundo botón creado en el archivo HTML y asignar el valor de la propiedad de margen-izquierda como"50px":

.btn2
margen-izquierda: 50px;

Al hacerlo, se crea espacio izquierdo del segundo botón que se puede ver a continuación:

Quiere usar ambas propiedades a la vez? Mira el siguiente ejemplo!

Ejemplo 3: Dar espacio entre dos botones con propiedades de margen-izquierda y margen-derecha

También puede establecer el margen de ambos botones para dar espacio entre ellos. Para hacerlo, crearemos espacio desde el lado derecho del primer botón y desde el lado izquierdo del segundo botón utilizando propiedades de margen-derecho y margen-izquierda, respectivamente:

.btn1
margen-derecha: 70px;

.btn2
margen izquierda: 70px;

Producción

Hemos proporcionado el método más simple relacionado con dar espacio entre dos botones en CSS.

Conclusión

"margen de pesa" y "margen de derechaLas propiedades de las CS se utilizan para dar espacio entre dos botones. Usando esto, puede ajustar el espacio desde los lados derecho e izquierdo de los botones. En este artículo, hemos explicado cómo dar espacio entre dos botones utilizando dos métodos diferentes y proporcionados ejemplos para cada uno de ellos.