Why does html layout change when <!DOCTYPE html> is included?
css, html
Solution
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.
Problem
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?