Geek Answers Handbook

Why does the html layout change when <! DOCTYPE html>?

Without the <!DOCTYPE html>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>

Displayed in Chrome and FF:

without doctype

But when the line is included <!DOCTYPE html>, html does the following:

with doctype

Why is this?

+4
source share
1 answer

When you announce <!DOCTYPE html>Chrome and Firefox will change inputfrom box-sizing: border-boxto box-sizing: content-box. Since the text field inputhas padding 1pxand borderof 1px, this will increase the value widthby 4pxtotal, and in your example this is enough to wrap it on the next line.

- , <!DOCTYPE> Quirks, , Strict, , <!DOCTYPE>.

+4

More articles:


All Articles