Question

我正在尝试在https://gist.github.com/页面中创建类似描述字段的框。 Here是我最小的例子。正如您所看到的（仅在chrome中），包装div之间的textarea底部有一个间隙。我怎么能摆脱它？

<div style="
    padding: 3px;
    background-color: #eee;
    border-radius: 3px;
    width: 200px;">

      <div style="border: 1px solid #ccc;">
         <textarea style="width: 194px; resize: vertical; border: 0px; height: 124px; margin: 0px;"></textarea>
      </div>
    </div>

有一个类似但旧的问题here，答案没有帮助。

Answer 1

诀窍是将textarea display: block;信用额提供给yuxel

只是一个注释：css reset（雅虎的一个）不会改变textarea的显示。

Answer 2

<div style="
padding: 3px;
background-color: #eee;
border-radius: 3px;
width: 200px;">

  <div style="border: 1px solid #ccc; margin:0; padding:0;">
     <textarea style="width: 194px; resize: vertical; border: 0px; height: 124px; margin: 0px; top:0; right:0; bottom:0; left:0;"></textarea>
  </div>
</div>

是吗？

如何摆脱chrome浏览器中textarea底部与其包装div之间的差距？

2 个答案: