quackingduck · February 11, 2011 06:31 · quackingduck · Feb 12, 2011
diff --git a/div-vs-input.html b/div-vs-input.html
 <style>
 body {
  border-left: 1px solid black; margin-left: 40px; }

 div,input {
  font-family: sans-serif; font-size: 12px;
  margin: 0; padding: 0; outline: 0; border: 0;
  display: block; width: 20em;
 }

 p { padding-left: 10px; }

 div,input { background: #eee; }
 </style>

 <body>

 <p>
  The div and input elements have exactly the same styles (including a reset
  of all the default browser properties that I know of) but the input element
  has an extra left pixel of padding that I can't remove. Any ideas?
 </p>

 <div class="test">I'm a div element</div>
 <br />
 <input class="test" value="I'm a input element">
	<style>
	body {
	border-left: 1px solid black; margin-left: 40px; }

	div,input {
	font-family: sans-serif; font-size: 12px;
	margin: 0; padding: 0; outline: 0; border: 0;
	display: block; width: 20em;
	}

	p { padding-left: 10px; }

	div,input { background: #eee; }
	</style>

	<body>

	<p>
	The div and input elements have exactly the same styles (including a reset
	of all the default browser properties that I know of) but the input element
	has an extra left pixel of padding that I can't remove. Any ideas?
	</p>

	<div class="test">I'm a div element</div>
	<br />
	<input class="test" value="I'm a input element">