Html textarea 元素撑大父元素请教?


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <table>
        <tr>
            <!-- td 除了border 内部净空应该还有 24px -->
            <td style="height: 26px;">
                <!-- 里面放一个 22px 高的元素,  td实际高度 被撑大变成了 28.17px ,不理解这是什么梗-->
                <textarea style='height:22px;padding:1px; width: 100px;' /></textarea>
            </td>
        </tr>
    </table>
</body>
</html>
<style>
    td{
        width: 200px;
        box-sizing: border-box;
        border: 1px solid green;
        padding: 0; 
    }
    textarea{
        box-sizing: border-box;
        border: 1px solid rgb(237, 177, 205);
        resize: none;
        margin: 0;
    }
</style>

浏览器的算法没看明白啊? 已经弄明白. 要加了 display:block , 不过还是要请教怎么设置 textarea alt + enter主动换行的问题 enter 键被占用

inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom都可以避免这种情况出现.

在注册一个事件判断e.altKey&&e.codeKey==13或者修改监听的事件增加这个判断添加换行


<textarea style='height:42px;padding:1px; width: 100px;' id="ta"></textarea>
<script>
    ta.onkeydown = function (e) {
        if (e.keyCode == 13) {
            if (e.altKey) {
                this.value += '\n';//添加换行
            }
            else {
                return false;//阻止换行
            }
        }
    }
</script>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

Html textarea 元素 撑大父元素请教?

Html textarea 元素撑大父元素请教?