HTML5对line-height/inline-block的影响

1.删除和不删除<!DOCTYPE html>，对下面代码展示有很大的影响

2.原代码如下：

<!DOCTYPE html>
<style>
    #parent {
        line-height: 120px;
        background: gray;
        display: inline-block;
        margin: 0px;
        padding: 0px;
    }

    #child {
        width: 371px;
        height: 20px;
        background: red;
        display: inline-block;
    }
</style>

<div id="parent">
    <div id="child"></div>
</div>

不删除的情况

删除的情况

3.有没有师傅帮忙指导一二，小弟后端人员，刚入前端....，个人觉得是HTML5对line-height/inline-block的影响，不知对否，如果对，那么是怎么影响的?

css html

html5

阅读 3.7k

4 个回答

shockw4ver

✓ 已被采纳

<!doctype html>叫做文档类型声明，即告诉浏览器以何种标准来渲染你的网页。

在你的上下文中，其实 style 标签中的属性都生效了，只是浏览器在是否拥有文档类型声明的情况下对这些属性的解析规则不同。

如果不写，那么浏览器会使用叫做backCompat模式的渲染机制，说白了，就是使用浏览器自己的规则（一千个浏览器一千个页面），而写上的以后，根据声明内容不同，就会使用不同的规则进行渲染，这里的<!doctype html>是 html5 标准的声明，它告诉浏览器使用 w3c 制订的 html5 规范对文档上下文进行绘制。