css样式遇到问题小总结

在工作中我们可能遇到一些样式问题，明明没有什么错啊，为什么样式就不对呢？

下面我将为大家揭开神秘的面纱吧

问题1.设置了display:inline-block属性，元素却不在同一水平线上

 几个同级的div设置了display:inline-block属性，为什么就是不在同一水平线上呢？特别是两个div，其中一个div中再嵌套几个div的情况，两个大的div就不在同一水平线上，举个图

html结构如图：

，

这是因为display:inline-block;属性本身有个基线标准

解决方法：将两个大盒子的div设置vertical-align: middle;就可以解决了，如图：

问题2：我们设置了box-size:border-box;后怎么高度比要实现的效果还高了？

描述：小编原来是在最大一个盒子设置了box-size:border-box;属性，然后还设置了padding值（上下左右都设置了），结果宽度是正常的，但是高度超出了预期结果，开始以为是box-size:border-box;属性的原因，以为只能在宽度内绘制，高度无效，然后查了下，

最后小编检查了下设置box-size:border-box;的盒子高度，是跟设置的高度一致，并没有变高，而小编写的子元素距离等等也是根据UI准确设置的，小编思考了下，然后又自己测各个子盒子的高度，发现使用了line-height影响了上面文字底部和下面文字头部的高度，这让小编明白了，当遇到样式问题的时候也检查下盒子的大小，具体分析，有的时候并不是自己想的那个属性的问题。

问题补充1：像我们在工作中，常常会遇到这种情况：按照UI给设计图写的，怎么元素的间距设置的，实际上显示的就是跟设计图有差距呢？

这是因为像块级元素有默认的margin值，像 h1~h6 ，就有默认的margin值，这时你可以设置 h1~h6的 line-heigh 的值就可以了，看设计稿具体文字高度， line-heigh 的值就设置为多少，按照设计稿设置 margin 或 padding。像span这种行内元素是不会有这种情况。

问题补充2： 消除图片之间的默认间距

 方法1：div { font-size:0; }

方法2： img { display: block; }

方法3： img { vertical-align:top; }

方法4： div { margin-bottom: -3px; }

好了，问题暂时到这儿，有遇到好的问题欢迎探讨哦！