css盒子突出（b站黑马程序猿）

为什么这两种写法会导致盒子膨胀不一样？一个出边框，一个还在里面一点？
第一个是我自己写的，第二个是b站pink老大的，求解答！

你的div设置了display : inline ，盒子变成了行内元素，行内元素没办法设置高度也没方法被子元素撑起，把这句样式删掉就好了

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

建议学习 Flex 布局语法教程 这种布局方式 编写简单 应用广泛！
https://www.runoob.com/w3cnote/flex-grammar.html