CSS問題：Chrome爲文本字段添加了3px額外保證金 -

Question

我有3個文本字段。他們每個人都有保證金權利：5px。谷歌瀏覽器會在每個元素上自動在邊距右側添加3-4像素。我不知道如何解決這個問題。我注意到這一點，因爲當我使用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

雖然，這可能是依賴於瀏覽器版本，瀏覽器通常具備的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; 

所以，這與瀏覽器樣式表規則無關。

UPDATE

如果添加一個空白樣

• 空間
• 標籤
• 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"> 
  

  我建議你使用1號方法（把主題在一行中），但無論是將工作。