定义

height指的是块级别元素的高度;

line-height指的是元素内容的高度。

height和line-height的联系

CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。

如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值?

测试一

CSS:
.test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;}
html:
<div class="test1">测试</div>

结果:


测试二

CSS:
.test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
<div class="test2">测试</div>

结果:


结论:在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。

div的height与line-height的大小关系不同时,会有什么显示结果呢?

(1)height = line-height时

(2)height>line-height时

(3)height<line-height时

最新文章

  1. Educational Codeforces Round 12 E Beautiful Subarrays
  2. 利用PHP读取文件
  3. css样式表 格式与布局
  4. javascript 对象和数组(花括号、方括号)
  5. JQuery上传插件uploadify整理(Options)
  6. win7系统服务print spooler 无法启动解决方法(开启及关闭方法)
  7. UVa784 Maze Exploration
  8. C# LINQ详解(一)
  9. HTML静态网页(框架)
  10. 初学Servlet之继承GenericServlet
  11. 【RL-TCPnet网络教程】第13章 RL-TCPnet之TCP服务器
  12. 为什么 npm 要为每个项目单独安装一遍 node_modules?
  13. mybatis教程5(延迟加载和缓存)
  14. Shell获取指定时间
  15. CS页面-Asp.net+Spring.Net.Framework--SNF快速开发平台3.0
  16. (Review cs231n) Gradient Vectorized
  17. iOS 允许后台任务吗?
  18. 在不进入Guest OS的情况下,取得Guest OS的IP地址
  19. 关于运行“基于极限学习机ELM的人脸识别程序”代码犯下的一些错误
  20. Linux——curl(转)

热门文章

  1. Ubuntu 18.04安装Samba服务器及配置
  2. Vue UI组件库
  3. ubuntu tensorflow cpu faster-rcnn 测试自己训练的模型
  4. css简单学习属性2---背景图片
  5. js 匿名函数 js-函数定义方法
  6. admin源码分析
  7. 花里胡哨,如何在Linux终端输出带有颜色的字体,将带颜色的字体赋值给变量
  8. WhatsApp Group vs WhatsApp Broadcast for Business
  9. Java面试(一)
  10. Json乱码解决统一代码