CSS 问题：Chrome 为文本字段添加了 3px 额外的边距

Question

我有 3 个文本字段。他们每个人都有margin-right：5px。 Google Chrome 会自动在每个元素的 margin-right 上添加 3-4px。我不知道如何解决这个问题。我注意到这一点是因为当我使用 JQUERY 在点击事件上生成更多文本字段时。我没有看到这些额外的利润。这些额外的边距仅在从我的 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
• 使用浮动

• 去掉元素之间的空格，可以这样做：

  1- 将主题放在一行中

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

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

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

  3- 使用 HTML cmets

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

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