<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 设置行高line-height 可以接受值： 1.直接接受一个大小px值 2.可以指定一个百分数，相对于字体去计算行高 3.可以直接传一个数值，则行高会设置字体大小相应的倍数 行间距=行高-字体大小 1.对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中 2.在font中也可以指定元素 字体大小/行高，该值是可选的，如果不指定则会使用默认值 */ .p1{ font-size: 20px; line-height: 40px; } .box{ width: 200px; height: 200px; background-color: #bfa; line-height: 200px; } .p2{ font: 30px/30px; } </style> </head> <body> <div>hello你好</div> <p class="p1"></p> <span class="p2">hi我是一段文字</span> <span class="p3">hi我是一段文字</span> <span style="font-family:serif;">我是一段文字，ABCa</span> <div class="box">我是一段文字</div> </body> </html>
效果：
hello你好
hi我是一段文字 hi我是一段文字 我是一段文字，ABCa
我是一段文字