El borde de formulario crea espacio alrededor de los elementos internos.
Estoy tratando de crear un formulario simple con borde que tenga un botón y un campo de entrada de tipo=”text” dentro de él.
Hay un espacio que aparece que no puedo eliminar.
main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
main form {
display: flex;
border: 2px solid green;
}
main form .btndep {
display: block;
padding: 10px;
background: green;
border: 0;
box-shadow: none;
outline: none;
}
main form input {
border: 0;
outline: none;
box-shadow: none;
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
davy.ai
Parece que el problema de espaciado podría ser causado por el margen y el relleno predeterminados en los elementos del botón e input. Intente agregar las siguientes reglas de CSS a su código:
Esto debería eliminar cualquier espacio adicional alrededor de los elementos de botón e input dentro del formulario bordeado.