我希望初始状态(没有 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>
完整代码
1
ZZITE 89 天前 1
textarea {
display: block; } |
2
sayitagain 89 天前
你没发现你 textarea 上的 height 是无效的吗...
|
4
Podul 89 天前
display: block; 或者 vertical-align: bottom;
想不起来是啥原因了,好像和对齐方式有关? inline-block 的元素会有这个问题,比如:img, svg |
5
ygcaicn OP @sayitagain height 有效,这里截图是手动拖拽 resize 之后的结果,@ZZITE 给出的方案解决了,应该是 textarea 默认 display inline-block 导致的效果,具体有没有大神解释一下
|
6
go522000 89 天前
textarea 加上 display:flex; 试试
|
7
zhangxingliang 89 天前
.d {font-size: 0;}
|
8
old9 89 天前 via Android
inline block 元素,默认 1 停在基线上
|
9
chnwillliu 89 天前 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 89 天前
inline block 是 css 大坑,所有异常首先怀疑这个
|
12
paopjian 89 天前
奇葩的文本对齐问题,不过不建议改 display,font-size 或者 line-height 更好一点
|
13
shinygang 89 天前
@zhangxingliang 用这个思路的还是不错的。
|