Como posso remover completamente a margem de caixas de texto em HTML / CSS
Pergunta
Eu tenho o seguinte 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>
A idéia é que as caixas de texto deve terminar de pixel perfeito no lado direito.
Um dia vou adicionar espaçamento nas linhas 2 e 3 ampliando as larguras para compensar, mas no momento eu gostaria de obter este exemplo simples para processar.
Assim Como posso remover as margens dessas caixas de texto de modo que a alinhar corretamente?
Solução
Eles não estão fazendo fila por causa do espaço em branco entre eles.
Se você fosse para remover todas as novas linhas e tabs entre os elementos <input>
, ele iria mostrar como você quer.
Outras dicas
Eu encontrei adicionando float: left;
para .box fez o que queria.
.box {
padding:0px;
margin:0px;
float: left;
}
Você está falando de direito justificando todas as caixas de texto?
Se assim for, isso não é uma questão de margem. Isso é simplesmente colocar as caixas de texto em um elemento que contém. Talvez um e, em seguida, definir o text-align: right; estilo css no div.
A fronteira não está incluído na largura, de modo que uma caixa com uma borda de 1px e uma largura de 150 pixels na verdade será 152 px de largura.