1

The other basic elements I tested do not have this. This is a test fiddle I created to show the issue:

The most obvious one is the width of 145px. This is not in the agent-style sheet or in the user styles.

It seems to come from nowhere.

https://jsfiddle.net/pLvjmue4/1/

HTML

<a>a1</a><a>a1</a><a>a1</a>
<p>p1</p><p>p1</p><p>p1</p>
<span>s1</span><span>s1</span><span>s1</span>
<div>d1</div><div>d1</div><div>d1</div>
<br>
<input/>
<input/>
<input/>

CSS

*{
  margin: 0px;
}
a{
  border: 1px solid black;
  color: red;
}
p{
  border: 1px solid black;
  color: blue;
}
span{
  border: 1px solid black;
  color: green;
}
div{
  border: 1px solid black;
  color: black
}
img{
  border: 1px solid black;
}
input{  
}
howard
  • 234
  • 1
  • 11

1 Answers1

1

White space is added to inline-block elements, see the following example of this in inspector:

Inspector

A work around would be to place them like the following in your HTML:

<div>
  <input /><input /><input />
</div>


<div style="font-size: 0;">
  <input />
  <input />
  <input />
</div>
<div>
  <input />
  <input />
  <input />
</div>

You can also use display: flex as well.

See fiddle: https://jsfiddle.net/w548tLfy/

dale landry
  • 7,831
  • 2
  • 16
  • 28
  • Thanks, I see the return character in the actual HTML was causing this. The mods required that I re-state my question. In general input behave differently. The most obvious is the default width of 145px. Where does this come from? It is not in the browser user-agent or the CSS I provided – howard May 23 '21 at 04:37
  • Inline (and inline-block) elements respect whitespace in the markup, this is the space character between words in the HTML markup. – dale landry May 23 '21 at 04:43