Invalid001：无width使margin auto无效

Invalid001：无width使margin auto无效

Invalid001：一个元素，当没有设置width时，margin:0 auto设置内容水平居中对齐无效。

正确代码

<div style="width:800px;margin:0 auto;">

故意改错代码。去掉width设置。

<div style="margin:0 auto;">

错误的运行效果。无法内容水平居中两边留白。

冲突原因。元素没有明确指定宽度时，无法自动计算margin-left与margin-right。

底层设计逻辑。当前块元素没有设置width，会与外部块元素的width一致，内外两个块元素同样宽度，所以不存在水平居中。当设置width后，内外两个块宽度不同，才有可能实现水平居中。

这是我们第1次碰到属性设置无效，后续我们讲解更多的属性设置无效、属性设置达不到预期效果，属性值被其它属性值自动修改等情况。

无效性问题的本质

浏览器程序是由C++编写的程序，解析HTML代码与CSS代码进行页面显示，HTML代码与CSS代码相当于页面的配置文件。w3c官方定义html与css显示过程中的各条规范规则，各浏览器厂商按照w3c规范规则编写程序对它们进行实现。

这些规范规则的本质是什么？w3c官方对于页面显示提供一套完整的设计方案，这些规范规则属于它设计方案的一个部分，一定有它底层设计的合理逻辑。

从这个角度看，CSS是一门规范规则性的语言，我们需要学习它的各项规范规则，通过开发者工具识别它，并理解它的底层设计逻辑。

本教程以“Invlid”开头列举所遇到的常见无效性规则。