Agregar espacio entre botones en HTML

1. Agregue un elemento div vacío entre dos botones para agregar espacio entre ellos en HTML
2. Use la propiedad margin-right para poner espacio entre los botones en HTML
3. Utilice la propiedad margin-right y el selector not(:last-child) para proporcionar espacio entre varios botones en HTML

Este artículo presentará algunos métodos para agregar espacio entre dos botones HTML.

Agregue un elemento div vacío entre dos botones para agregar espacio entre ellos en HTML

Se puede agregar un div vacío entre los dos botones para agregar un espacio entre ellos. Luego, podemos proporcionar el div con algo de ancho que crea algo de espacio entre los botones.

Por defecto, un div tiene una propiedad de display de block. Significa que el div ocupa una fila entera de su posición.

Si añadimos un elemento después de un div, ese elemento se colocará debajo del div en el navegador.

Por lo tanto, tenemos que cambiar la propiedad de visualización de div a inline-block. Los elementos inline-block tienen la propiedad tanto de bloque como en línea.

Los elementos inline-block pueden tener ancho, margen, relleno, etc., pero no ocupan toda la fila de su ubicación, a diferencia de los elementos block.

Por ejemplo, crea un div; dentro de ese div, crea dos botones usando la etiqueta button. Nombre esos botones Button 1 y Button 2.

Crea un div entre esos botones y dale una clase de espacio. Este div no debe contener ningún elemento.

Seleccione el div interior con su clase space en CSS y establezca la propiedad display en inner-block. Dale al div un poco de ancho de acuerdo con el requisito.

Tenga en cuenta que el valor de width será el espacio entre los botones. Además, establezca la propiedad height en auto para que div tome solo la altura requerida.

El siguiente ejemplo muestra que dos botones tienen un espacio de 4px.

Código de ejemplo:

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>

.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

Use la propiedad margin-right para poner espacio entre los botones en HTML

La propiedad margin de CSS crea un espacio alrededor de los elementos fuera de los bordes definidos. La propiedad margin combina cuatro propiedades: margin-top, margin-bottom, margin-left y margin-right.

La propiedad margin-top crea un espacio en la parte superior de un elemento. Asimismo, las propiedades margin-bottom, margin-right y margin-left crean espacio en la parte inferior, derecha e izquierda del elemento.

Podemos usar la propiedad margin-right para el primer elemento del botón para crear un espacio entre los botones.

Como resultado, se creará un margen de cierto ancho a la derecha del botón. Luego, el otro botón residirá al lado del margen.

Por ejemplo, cree dos botones usando la etiqueta button y nombre Button 1 y Button 2. Configure las clases del botón como B1 y B2.

En CSS, seleccione la clase B1 y establezca su propiedad margin-right en 4px. Esto creará un espacio de 4px a la derecha del Button 1, creando un espacio entre los dos botones.

Código de ejemplo:

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>

.B1 {
 margin-right: 4px;
}

Utilice la propiedad margin-right y el selector not(:last-child) para proporcionar espacio entre varios botones en HTML

Podemos agregar espacios entre los múltiples botones usando la propiedad margin-right y el selector not() de CSS. La lógica detrás de este enfoque es que crearemos el espacio entre cada botón usando la propiedad margin-right como en el segundo método.

Pero, no crearemos un espacio después del último botón.

Para ello, utilizaremos el selector not(). Dentro, el selector not, podemos usar :last-child.

El selector :last-child denota el último hijo dentro de un contenedor. En conjunto, podemos aplicar la siguiente regla para aplicar los estilos.

.container>.button:not(:last-child){

}

El símbolo > selecciona a todos los niños dentro del contenedor. Como resultado, los estilos se aplicarán a todos los elementos secundarios con la clase botón dentro del container principal, excepto al último elemento secundario.

Por ejemplo, crea un div y dale una clase de contenedor.

Dentro del div, crea tres botones y llámalos Button 1, Button 2 y Button 3. Además, establezca el button como la clase para cada botón.

Ahora, use la regla mencionada anteriormente para establecer el estilo en CSS. Dentro de la regla, use la propiedad margin-right y establézcala en 10px para agregar espacio a 10px entre los elementos o botones secundarios.

El siguiente ejemplo muestra que los tres botones tienen un espacio de 10px entre ellos.

Código de ejemplo:

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>

.container>.button:not(:last-child) {
 margin-right: 10px;
}