问题记录关于line-height少了2px的问题

最新推荐文章于 2022-05-11 11:02:45 发布

仙人掌的初恋

最新推荐文章于 2022-05-11 11:02:45 发布

阅读量456

点赞数

本文链接：https://blog.csdn.net/qq_27946489/article/details/53579528

版权

在学习马富天童鞋http://www.mafutian.net/的一个css二级导航栏的时候发现了一个奇怪的问题,没有搞清楚,暂时放到这里.

效果图是这样的:

拿其中一个""首页""块来说,当设置font-size: 12px;display: inline-block;line-height: 40px;padding: 0px 10px;border: dotted 1px #999;此时效果如图.我不想用line-height,因为如果另起一行的话会出现两行并列,间距很大的问题.采用于修改为如下:font-size: 12px;padding: 13px 10px;border: dotted 1px #999;此时的效果和刚刚是一样的.但是计算一下像素值12px+13px+13px=38px.这就和line-height: 40px不相等了,很矛盾.后来想难道是因为1px的border的问题吗?38px+2px刚好等于40px.是这样吗?于是修改border的值为10px.效果是这样的.当我再次采用line-height为40px的时候发现两者的效果依然是一样的,这说明不是border长度引起的问题,而是line-height自身的问题.

是不是说line-height本身就有2px的缺少呢?反过来说会不会line-height本身是正常的而是pading的问题呢,到底哪一个是准确的呢?

后来测试发现原来line-height是准确的,不准确的是font-size.事实上字体的像素并不是这个字体的实际像素,字体的外面还有一个边框.我的理解是字体的像素值是对的,但是他外面有一个1px的边框,这就导致虽然我设置的字体是12px实际上并不是12px,而是14px .不知道对不对.

..............................................................................................................................................................................................................................................................

我是分割线

题外话:

最后一个问题:第一个图示下方有一个"这是主页哦"的div,对它的样式的设置是这样的:

border: solid 1px #999;width: 400px;min-height: 300px;font-size: 12px;color: #666; display: inline-block;margin-top: 30px; 当然这是正常的,这里用display: inline-block;和float:left具有同等效果.由于div上方的导航栏是左浮动的,而且div的width是100%所以div会另起一行显示.如果width设置为具体的某一个值,比如30px的话,就不行了,div会和导航栏已知浮动下去.如果要实现宽度自定义,可以清除左浮动clear: left; display: block;这样便解决了,但是会出现一个问题,清除浮动之后margin-top会无效.这样div和导航栏之间的空白就没有了,为什么清除浮动之后margin-top会无效,网上搜了一下,还是没有找到令人信服的解释.先放在这.