{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 乱世女痞 的问题《Why does my extremely basic CSS code produce diffe》','https://www.manongdao.com/q-725983.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Two different outputs, but exactly the same super-basic code:
CSS
input {
display: block;
min-width: 200px;
padding: 10px;
}
HTML
<input type="text" />
<input type="text" />
<input type="submit" value="Register" />
produces the following output on jsFiddle (live demo here),
but this output in jsBin (live demo here)
I have tested this in latest Firefox and Chrome (same differences everywhere). In a plain naked .html file, it looks like on jsBin btw...
jsBin is of course showing the correct/expected output.
I can't say why jsFiddle extends the input fields in that way - I cannot even view it, you said it was slow, the website won't even load for me at the moment.
Perhaps their current issues are greater than just slow/unavailability.
If I were you I'd just use jsBin for now and not worry about it.
Edit: user568458's answer is better. I can't comment, but I think box-sizing takes a default value from the version of javascript - selectable in jsFiddle not sure about jsBin.
Assuming this is true, I can say for sure 1.9.2 adds padding to a given width - had me stumped for a good thirty minutes when it messed with my Wordpress layout.
Two reasons:
box-sizingproperty. Jsfiddle is going withbox-sizing: content-box;while Jsbin is going withbox-sizing: border-box;content-boxtakes the width, then adds the padding - hence the extra width.border-box;includes the padding (and border) in the width.You can see what's going on if you open up a debugging tool like Firebug (or Inspect Element), target the input box, and look at the Layout tab (or equivalent).
As a side note, I can't see exactly where the
box-sizingsettings are coming from - it looks like they're not being set directly but are being applied as a result of another setting. Either that or I just can't find them... either waybox-sizingis rather experimental, I wouldn't be surprised if they're fixed and giving the same result as expected in a few months.The difference is the doctype.
From JS Bin (no doctype):
From jsFiddle (html5 doctype):
The lack of a doctype on JS Bin is throwing the browser into quirks mode. Apparently quirks mode and standards mode use a different default value for the box-sizing property.