前端学习所遇到的坑

为什么两个内联块在同一行出bug？

正常情况两个内联块可以排列在一起。当内联块里面加了内容之后，就会离奇的出现bug。

简单地就以上这种情况来说，没有内容的话会基于它的margin底边缘也就是它的下边缘对齐，而包含内容的话会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况。

解决办法：
1、float浮动，这是备选方案，脱离文档流后页面布局不好控制
2、给所有元素加内容例如空格符
3、最实用的就是设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置