这是一个创建于 435 天前的主题，其中的信息可能已经有所发展或是发生改变。
我希望初始状态（没有 js 干预）下 textarea 高度撑满父容器，发现父容器始终比 textarea 高 6px ，看 padding ，margin 啥的都没有，就是下方比 textarea 多出来 6px ，请教大神解惑啊
textarea { height: 100%; line-height: normal; box-sizing: border-box; } .d { background-color: #c26bea; padding: 0; } <div class="d"> <textarea placeholder="输入提示词"></textarea> </div> 完整代码
13 条回复 2024-08-06 19:00:16 +08:00
 | 1 ZZITE 2024-08-06 17:50:06 +08:00  1 textarea { display: block; } |
 | 2 sayitagain 2024-08-06 17:51:59 +08:00 你没发现你 textarea 上的 height 是无效的吗... |
 | 4 Podul 2024-08-06 17:58:08 +08:00 display: block; 或者 vertical-align: bottom; 想不起来是啥原因了，好像和对齐方式有关？ inline-block 的元素会有这个问题，比如：img, svg |
 | 5 ygcaicn OP @sayitagain height 有效，这里截图是手动拖拽 resize 之后的结果，@ZZITE 给出的方案解决了，应该是 textarea 默认 display inline-block 导致的效果，具体有没有大神解释一下 |
 | 6 go522000 2024-08-06 17:59:58 +08:00 textarea 加上 display:flex; 试试 |
 | 7 zhangxingliang 2024-08-06 18:01:41 +08:00 .d {font-size: 0;} |
 | 8 old9 2024-08-06 18:03:28 +08:00 via Android inline block 元素，默认 1 停在基线上 |
 | 9 chnwillliu 2024-08-06 18:08:46 +08:00 via Android 幽灵空白节点 每个 line box 内有个零宽度 strut 盒子 |
| 10 ygcaicn OP 感谢大家，我愣是调了 1 个小时，切身体会了一把定位问题远比“解决”问题困难，搜了一下文档这里有个早年尤大在知乎的回答 https://www.zhihu.com/question/21558138/answer/18615056 纠其根因是 inline 元素的 vertical-align 默认对齐在 BASELINE ，那 6px （不一定是 6px ）是 BASELINE 和 BOTTOM 的距离  ) |
 | 11 realJamespond 2024-08-06 18:28:09 +08:00 inline block 是 css 大坑，所有异常首先怀疑这个 |
 | 12 paopjian 2024-08-06 18:43:43 +08:00 奇葩的文本对齐问题,不过不建议改 display,font-size 或者 line-height 更好一点 |
 | 13 shinygang 2024-08-06 19:00:16 +08:00 @zhangxingliang 用这个思路的还是不错的。 |
Select Language