Why does my extremely basic CSS code produce different outputs on jsFiddle and jsBin?

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...

The difference is the doctype.

From JS Bin (no doctype):

<html>

From jsFiddle (html5 doctype):

<!DOCTYPE html>

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.

Two reasons:

Tools like these apply a CSS reset to their content to reduce variability caused by browser defaults. Different tools will apply different defaults
The specific difference seems to be the box-sizing property. Jsfiddle is going with box-sizing: content-box; while Jsbin is going with box-sizing: border-box;

content-box takes 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-sizing settings 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 way box-sizing is rather experimental, I wouldn't be surprised if they're fixed and giving the same result as expected in a few months.

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.

来源：https://stackoverflow.com/questions/17493145/why-does-my-extremely-basic-css-code-produce-different-outputs-on-jsfiddle-and-j

标签

html

css

jsfiddle

jsbin