CSS问题：Chrome会在文本字段中添加3px额外边距

Question

我有3个文本字段。他们每个人都有保证金权利：5px。谷歌浏览器会自动在每个元素的右边缘添加3-4px。我不知道如何解决这个问题。我注意到这一点，因为当我使用JQUERY在click事件上生成更多文本字段时。我没有看到这些额外的保证金。仅当从我的HTML呈现元素时才添加这些额外的边距，而不是从我的Javascript中的字符串呈现。任何的想法？感谢。

HTML：

<input type="text" class="text_input" name="field_class_0" />
<input type="text" class="text_input" name="field_book_title_0" />
<input type="text" class="text_input" name="field_isbn_0" />

CSS：

.text_input {
margin: 0 5px 5px 0;
padding: 5px 7px;
}

https://jsfiddle.net/3g42rjdp/2/

Answer 1

虽然这可能取决于浏览器版本，但Chrome通常会为input元素设置这些CSS规则：

-webkit-appearance: textfield;
background-color: white;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border: 2px inset;

以及input，textarea，keygen，select，button：

text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;

这适用于input，textarea，keygen，select，button，meter，progress：

-webkit-writing-mode: horizontal-tb;

因此，这与浏览器样式表规则无关。

更新

如果你添加像

这样的空格

• 空间
• 标签
• newine（这是你的情况）

他们之间会出现差距。

根据具体情况，您可以使用以下任一方法消除差距：

• 添加否定margin-left
• 使用float

• 删除元素之间的空格，可以这样做：

  1-将主题放在一行

  <input type="text"><input type="text"><input type="text">
  

  2-删除空间（别担心，这是正确的！:)）

  <input type="text"><
  input type="text"><
  input type="text">
  

  3-使用HTML评论

  <input type="text"><!--
  --><input type="text">
  

  我建议您使用 Number 1 方法（将主题放在一行中），但两种方法都可以使用。