How can I completely remove the Margin of textboxes in HTML/css

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

  •  03-07-2019
  •  | 
  •  

Question

I have the following 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>

The idea is that the textboxes should finish pixel perfect on the right hand side.

I will eventually add spacing on rows 2 and 3 enlarging the widths to compensate, but for the moment I would like to get this simple sample to render.

So how can I remove the margins of these textboxes such that the align properly?

Was it helpful?

Solution

They're not lining up because of the whitespace between them.

If you were to remove all the newlines and tabs between the <input> elements, it would display as you want.

OTHER TIPS

I found adding float: left; to .box did what you wanted.

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

Are you talking about right justifying all the textboxes?

If so, that's not a margin question. That's simply putting the textboxes in a containing element. Perhaps a and then set the text-align: right; css style on the div.

The border is not included in the width, so a box with a 1px border and a width of 150px will actually be 152 px wide.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top