Without <!DOCTYPE html> the following html:
<style>
input { width: 400px; }
span { width: 160px; display: inline-block; }
div { width: 560px; }
</style>
<div>
<span>Slug</span><input type=text placeholder="enter-article-slug-here">
</div>
Renders like this in Chrome and FF:
But when the line <!DOCTYPE html> is included, the html renders like this:
Why is this?
When you declare <!DOCTYPE html>, Chrome and Firefox will change input from box-sizing: border-box to box-sizing: content-box. Because the input text box has a padding of 1px and a border of 1px, this will increase the width by 4px total, and in your example, that is enough to wrap it to the next line.
The user-agent stylesheet is set this way because without a <!DOCTYPE> declared, the browser is rendering in Quirks mode, which has a different default stylesheet than the normal Strict mode which is present when a <!DOCTYPE> is declared.
