When it comes to CSS rules for the input element in Chrome, the browser version may play a role. Generally, these are the rules:
-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;
For elements like input, textarea, keygen, select, and button, the following rules apply:
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;
And specifically for input, textarea, keygen, select, button, meter, progress:
-webkit-writing-mode: horizontal-tb;
These rules do not pertain to the browser's stylesheet.
UPDATE
If you introduce a white-space character such as
- space
- tab
- newline ( This is your case )
between elements, it will create a gap.
To eliminate this gap, you can consider using one of the following methods:
- Add a negative
margin-left
- Utilize float
Eliminate the whitespace between elements by:
1- Placing them on a single line
<input type="text><input type="text><input type="text>
2- Removing the space (No worries, it's correct! :) )
<input type="text><
input type="text><
input type="text>
3- Using HTML comments
<input type="text><!--
--><input type="text>
I recommend using the Number 1 method (Placing them on a single line), but any of these options will work.