Cómo crear más espacio entre un botón y un cuadro de texto en HTML o CSS

Para un espaciado HTML simple, puede usar

pre significa preformateado y tomará tantos espacios como pones como en cualquier aplicación de procesamiento de texto como el bloc de notas, ms-word, etc.

Hay tres formas de lograr eso.

1. Usando relleno

Simplemente agregue relleno a todos los lados del div y configure text-align: center;.

div {
acolchado: 10px 5px;
alinear texto: centro;
}

2. Uso de relleno y altura de línea.

Agregue relleno al lado izquierdo y derecho del div y establezca una line-height de línea del texto dentro.

div {
relleno: 0 5px;
altura de línea: 10px;
}

EDITAR.

3. Uso de bordes.

Déle a div un max-width y configure la altura en auto y text-align: center y cambie el ancho del borde en consecuencia.

div {
ancho máximo: (int) px;
altura: auto;
estilo de borde: sólido;
ancho del borde: (int) px (int) px (int) px (int) px;
color del borde: # color-a;
color de fondo: # color-a;
color: #ffffff;
alinear texto: centro;
margen: 0 automático;
}

Aquí hay un ejemplo de trabajo. Por favor, deje un comentario para cualquier duda adicional y haga este tipo de preguntas en StackOverflow.

Gracias Terepaima Pérez por señalarlo.

Dependiendo del valor de ‘posición’ de sus elementos, por ejemplo, si son absolutos, puede moverlos cambiando los valores ‘superior’, ‘izquierdo’, ‘derecho’ e ‘inferior’, por ejemplo:

.button {
posición: absoluta;
arriba: 10px;
izquierda: 5px;
}

La mejor manera de agregar espacio entre dos elementos HTML es agregar relleno o un margen en CSS.

el relleno agregará espacio al exterior de un elemento y los márgenes agregarán espacio entre dos elementos.

Al agregar tanto relleno como márgenes, puede elegir agregarlo a todos los lados por igual o apuntar a la parte superior, inferior, izquierda o derecha individualmente.

a continuación es cómo escribirías esto en el CSS.

.botón{
relleno-izquierda: 10px;
relleno derecho: 20px;
relleno superior: 30px;
relleno inferior: 10px;
}

.botón{
margen: 10px;
}

La mejor manera es con css:

.espaciador {
// a continuación creará espacio entre elementos reales
margen izquierdo: 10px;
// a continuación creará espacio dentro de un elemento, pero la ilusión es que hay un espacio a pesar de que los elementos todavía se tocan
relleno-izquierda: 10px;
}

La otra opción rápida y sucia es agregarlo físicamente:

Push Me & nbsp;

Use relleno.

CSS: .button {relleno: 10 10 10 10}

Esto colocará el relleno alrededor del botón. Los primeros 10 son para el relleno superior, el segundo es el relleno derecho, el tercero es el inferior y el último se deja para que vayan de izquierda a derecha en sentido horario.

Intente usar CSS margin-left o margin-right para ajustar espacios entre elementos según corresponda …