V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ygcaicn
V2EX  ›  程序员

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

  •  
  •   ygcaicn · 111 天前 · 1292 次点击
    这是一个创建于 111 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我希望初始状态(没有 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 条回复    2024-08-06 19:00:16 +08:00
    ZZITE
        1
    ZZITE  
       111 天前   ❤️ 1
    textarea {
    display: block;
    }
    sayitagain
        2
    sayitagain  
       111 天前
    你没发现你 textarea 上的 height 是无效的吗...
    ygcaicn
        3
    ygcaicn  
    OP
       111 天前
    @ZZITE 666 解决了,非常感谢!!!
    Podul
        4
    Podul  
       111 天前
    display: block; 或者 vertical-align: bottom;

    想不起来是啥原因了,好像和对齐方式有关?
    inline-block 的元素会有这个问题,比如:img, svg
    ygcaicn
        5
    ygcaicn  
    OP
       111 天前
    @sayitagain height 有效,这里截图是手动拖拽 resize 之后的结果,@ZZITE 给出的方案解决了,应该是 textarea 默认 display inline-block 导致的效果,具体有没有大神解释一下
    go522000
        6
    go522000  
       111 天前
    textarea 加上 display:flex; 试试
    zhangxingliang
        7
    zhangxingliang  
       111 天前
    .d {font-size: 0;}
    old9
        8
    old9  
       111 天前 via Android
    inline block 元素,默认 1 停在基线上
    chnwillliu
        9
    chnwillliu  
       111 天前 via Android
    幽灵空白节点
    每个 line box 内有个零宽度 strut 盒子
    ygcaicn
        10
    ygcaicn  
    OP
       111 天前
    感谢大家,我愣是调了 1 个小时,切身体会了一把定位问题远比“解决”问题困难,搜了一下文档这里有个早年尤大在知乎的回答 https://www.zhihu.com/question/21558138/answer/18615056

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

    ![]( )
    realJamespond
        11
    realJamespond  
       111 天前
    inline block 是 css 大坑,所有异常首先怀疑这个
    paopjian
        12
    paopjian  
       111 天前
    奇葩的文本对齐问题,不过不建议改 display,font-size 或者 line-height 更好一点
    shinygang
        13
    shinygang  
       111 天前
    @zhangxingliang 用这个思路的还是不错的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5976 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 02:14 · PVG 10:14 · LAX 18:14 · JFK 21:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.