Como posso remover completamente a margem de caixas de texto em HTML / CSS

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

  •  03-07-2019
  •  | 
  •  

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?

Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top