css 世界笔记

2019-07-23  本文已影响0人  邹小邹大厨

测试环境

image.png

电脑: mac

http://demo.cssworld.cn/5/2-2.php

书上标记如下:



实际情况入下:


image.png

设置了line-height并不能影响内联元素的高度,比如设置line-height:1,表现依然一样


image.png

http://demo.cssworld.cn/5/2-3.php

书中图片:


image.png

测试环境:

image.png

修改属性如下:


image.png

可以看到内联元素的高度,至少在chrome下面的高度是只受font-size的影响,而和line-height没有关系,但是外面块元素,确实收到了line-height的影响。

为什么 line-height 可以让内联元素“垂直居中”

1, 书中例子,图片


image.png
image.png

测试环境


image.png

5.2.3 深入 line-height 的各类属性值

image.png

测试环境下:chrome差不多是, 宋体 1.4, 微软雅黑是1


image.png image.png

5.2.4 内联元素 line-height 的“大值特性”

  1. 这里的sapn的高度不是96px


image.png
上一篇下一篇

猜你喜欢

热点阅读