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

LowB
  • 231

图片描述
图片描述

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

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

回复
阅读 2.5k
1 个回答

我试了下,并不会出现你说的情况啊,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>

图片描述

图片描述

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