请问如何处理CSS中line-height造成的顶部距离？

LowB
    2311119

    图片描述
    图片描述

    如题，我建立了一个textarea，想实现类似图1的效果，文字距离顶部横线距离为6。
    但是line-height造成了textarea的文字与顶部产生距离，使我不得不把padding-top设置为2。
    可是文字一多的时候下拉又成了图2的样子，非常难看。

    请问有什么办法能够让line-height设置后文字与顶部距离为0？
    这样我可以用padding处理边距。非常感谢！

    csshtml
    回复
    阅读 3k
    1 个回答
    得票最新
    jacktown
      5971719
      ✓ 已被采纳

      我试了下，并不会出现你说的情况啊，padding会跟随内容去一起滚动，所以不会出现你所说的上方白条遮挡。

      我猜测你的是否有标签嵌套，padding是不是设置在了外层元素上。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        textarea{
            display: block;
            width: 400px;
            height: 200px;
            margin: auto;
            padding: 20px;
            line-height: 2em;
            border: 1px solid #080;
        }
    </style>
</head>
<body>
    <textarea name="a" id="a" cols="30" rows="10">
        测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。测试文本，。。测试。。
    </textarea>
</body>
</html>

      图片描述

      图片描述

      回复
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏
      2987