如何完全删除 HTML/css 中文本框的边距答案

【问题标题】：How can I completely remove the Margin of textboxes in HTML/css如何完全删除 HTML/css 中文本框的边距
【发布时间】：2009-01-05 16:01:04
【问题描述】：

我有以下 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>

这个想法是文本框应该在右侧完成像素完美。

我最终会在第 2 行和第 3 行添加间距以扩大宽度以进行补偿，但目前我想渲染这个简单的示例。

那么我怎样才能删除这些文本框的边距以便正确对齐？

【问题讨论】：

标签： html css textbox margins

【解决方案1】：

他们没有排队，因为他们之间有空格。

如果您要删除 <input> 元素之间的所有换行符和制表符，它将按您的意愿显示。

【讨论】：

我忘记了这个烦人的事情。删除它也可以。
与罗斯的回答一样有效，并且不需要 Float （这更适合我）但仍然受到奇怪的总宽度的困扰？请参阅他的回答下的评论。
为了让事情更清楚，我将作为一个单独的问题询问“总宽度的奇异性”
这已经咬了我好几次了。总是忘记空格。谢谢！

【解决方案2】：

我发现将 float: left; 添加到 .box 可以满足您的要求。

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

【讨论】：

这有点用。但是，总宽度似乎存在差异。我必须从第 2 行的第一个文本框和第 3 行的第一个 2 中删除 2 个像素，以便将所有内容对齐...这似乎是错误的
是的 - 我刚刚意识到 RoBorg 的答案 (stackoverflow.com/questions/413573/…) 更正确，我只是做同样的事情有点错误。
顺便说一下，它在 chrome 和 IE 上看起来非常不同。
为了让事情更清楚，我将作为一个单独的问题询问“总宽度的奇异性”

【解决方案3】：

您是在说正确对齐所有文本框吗？

如果是这样，那不是边际问题。这只是将文本框放在包含元素中。也许 a 然后设置 text-align: right; div 上的 css 样式。

【讨论】：

【解决方案4】：

边框不包含在宽度中，因此边框为 1px 且宽度为 150px 的框实际上将是 152 px 宽。

【讨论】：