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

[ygcaicn]

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

[ZZITE]

textarea {
display: block;
}

[sayitagain]

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

[ygcaicn]

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

[Podul]

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

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

[ygcaicn]

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

[go522000]

textarea 加上 display:flex; 试试

[zhangxingliang]

.d {font-size: 0;}

[old9]

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

[chnwillliu]

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

[ygcaicn]

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

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


[realJamespond]

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

[paopjian]

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

[shinygang]

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