Comment puis-je supprimer complètement la marge des zones de texte en HTML / CSS

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

  •  03-07-2019
  •  | 
  •  

Question

J'ai le code HTML suivant 

<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>

L'idée est que les zones de texte doivent se terminer pixel parfait du côté droit.

J'ajouterai éventuellement un espacement sur les rangées 2 et 3 en agrandissant les largeurs pour compenser, mais pour le moment, j'aimerais obtenir le rendu de cet exemple simple.

Alors comment puis-je supprimer les marges de ces zones de texte de manière à ce qu'elles soient correctement alignées?

Était-ce utile?

La solution

Ils ne font pas la queue à cause des espaces blancs qui les séparent.

Si vous deviez supprimer toutes les sauts de ligne et les onglets entre les <input> éléments, les éléments s'afficheraient comme vous le souhaitez.

Autres conseils

J'ai trouvé que l'ajout de float: left; à .box faisait ce que vous vouliez. 

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

Parlez-vous de bien justifier toutes les zones de texte?

Si oui, ce n'est pas une question de marge. Cela consiste simplement à placer les zones de texte dans un élément contenant. Peut-être un et ensuite définir le text-align: right; style CSS sur le div.

La bordure n’est pas incluse dans la largeur. Par conséquent, une boîte avec une bordure de 1 px et une largeur de 150 px aura en réalité une largeur de 152 px.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top