¿Cómo puedo eliminar completamente el margen de los cuadros de texto en HTML / CSS?

StackOverflow https://stackoverflow.com/questions/413573

  •  03-07-2019
  •  | 
  •  

Pregunta

Tengo el siguiente HTML 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style>
    .box
    {
        border:solid black 1px;
        padding:0px;
        margin:0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br />
        <input class="box" style="width:150px;" />
        <input class="box" style="width:150px;" /><br />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
    </form>
</body>
</html>

La idea es que los cuadros de texto deben terminar con píxeles perfectos en el lado derecho.

Eventualmente agregaré espacios en las filas 2 y 3 ampliando los anchos para compensar, pero por el momento me gustaría obtener esta muestra simple para renderizar.

Entonces, ¿cómo puedo eliminar los márgenes de estos cuadros de texto para que se alineen correctamente?

¿Fue útil?

Solución

No se están alineando debido al espacio en blanco entre ellos.

Si elimina todas las líneas nuevas y pestañas entre los elementos <input>, se mostrará como desee.

Otros consejos

Encontré que agregar float: left; a .box hizo lo que quería. 

.box {
    padding:0px;
    margin:0px;
    float: left;
}

¿Estás hablando de justificar correctamente todos los cuadros de texto?

Si es así, esa no es una pregunta de margen. Eso es simplemente poner los cuadros de texto en un elemento contenedor. Quizás ay luego establezca la alineación de texto: correcto; estilo CSS en el div.

El borde no está incluido en el ancho, por lo que una caja con un borde de 1px y un ancho de 150px en realidad tendrá 152 px de ancho.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top