调个前端布局遇到个问题请教大家

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 646 days ago, the information mentioned may be changed or developed.

我希望初始状态（没有 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>

完整代码

https://gist.githubusercontent.com/ygcaicn/87d92872cc1bd8018d95e4de4e17d55b/raw/e76d330a7cbeb0cfc1061d60d0bae5c511290b1c/test.html

13 replies • 2024-08-06 19:00:16 +08:00

ZZITE

Aug 6, 2024

textarea {
display: block;
}

sayitagain

Aug 6, 2024

你没发现你 textarea 上的 height 是无效的吗...

ygcaicn

Aug 6, 2024

@ZZITE 666 解决了，非常感谢！！！

Podul

Aug 6, 2024

display: block; 或者 vertical-align: bottom;

想不起来是啥原因了，好像和对齐方式有关？
inline-block 的元素会有这个问题，比如：img, svg

ygcaicn

Aug 6, 2024

@sayitagain height 有效，这里截图是手动拖拽 resize 之后的结果，@ZZITE 给出的方案解决了，应该是 textarea 默认 display inline-block 导致的效果，具体有没有大神解释一下

go522000

Aug 6, 2024

textarea 加上 display:flex; 试试

zhangxingliang

Aug 6, 2024

.d {font-size: 0;}

old9

Aug 6, 2024 via Android

inline block 元素，默认 1 停在基线上

chnwillliu

Aug 6, 2024 via Android

幽灵空白节点
每个 line box 内有个零宽度 strut 盒子

ygcaicn

Aug 6, 2024

感谢大家，我愣是调了 1 个小时，切身体会了一把定位问题远比“解决”问题困难，搜了一下文档这里有个早年尤大在知乎的回答 https://www.zhihu.com/question/21558138/answer/18615056

纠其根因是 inline 元素的 vertical-align 默认对齐在 BASELINE ，那 6px （不一定是 6px ）是 BASELINE 和 BOTTOM 的距离

![](

)

realJamespond

Aug 6, 2024

inline block 是 css 大坑，所有异常首先怀疑这个

paopjian

Aug 6, 2024

奇葩的文本对齐问题,不过不建议改 display,font-size 或者 line-height 更好一点

shinygang

Aug 6, 2024

@zhangxingliang 用这个思路的还是不错的。