• 技术文章 >Web开发 >css教程

    css设置行间距的方法

    小妮浅浅小妮浅浅2021-07-23 10:10:25原创5934

    1、使用数值来设置行间距,是拥有标准行高的段落。 默认行高大约是1。

    <!DOCTYPE html>
    <html>
     <head>
     <meta charset="UTF-8">
     <title>使用数值来设置行间距</title>
     <style type="text/css">
     p.small {
     line-height: 0.5
     }
      
     p.big {
     line-height: 2
     }
     </style>
     </head>
     <body>
     <p>
    这是拥有标准行高的段落。 默认行高大约是1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
     </p>
     
     <p>
     这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
     </p>
     
     <p>
     这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
     </p>
     </body>
     
    </html>

    2、使用百分比设置行间距,line-height属性指定了一个百分数,则会相对于字体去计算行高。在大多数浏览器中默认行高大约是 110% 到 120%。

    <!DOCTYPE html>
    <html>
     
     <head>
     <meta charset="UTF-8">
     <title>使用数值来设置行间距</title>
     <style type="text/css">
     p.small {
     line-height: 80%;
     }
      
     p.big {
     line-height: 200%;
     }
     </style>
     </head>
     
     <body>
     <p>
     这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
     </p>
     
     <p>
    这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
     </p>
     
     <p>
    这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
     </p>
     </body>
     
    </html>

    以上就是css设置行间距的方法,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css行间距
    品易云
    上一篇:css clamp()函数是什么 下一篇:css外边距margin是什么

    相关文章推荐

    • css中删除input输入框的阴影• css中margin是什么?怎么设置?• css3中设置元素宽度的方法• CSS鼠标跟随的原理• css中svg图片无法显示怎么办?• css点击元素变更颜色的方法• css如何使用scale()方法进行缩放• css line-height属性是什么• css设置行间距的三种方法• CSS中有哪些定位的方式• css中Min()函数如何使用• css max函数调整字体• css clamp()函数是什么

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网