零高度文本区域不是零像素高

zero height textarea is not zero pixels high

本文关键字：像素 零像素 高度 文本 区域      更新时间：2023-09-26

我正在尝试在页面的侧面板中制作可折叠的小部件。在大多数情况下，它工作正常。我能够通过过渡将子div的高度设置为0px，然后它们就会消失。

但是，我发现文本区域不会完全折叠。当我将文本区域的高度设置为 0px 时，它似乎像其他div 一样过渡，但它似乎仍然占据了比 0px 高更多的空间。

html是这样的：

<div class="container">
    <div class="heading" onclick="toggleSiblings(this)">heading</div>
    <textarea class="collapsible" placeholder="type in here..."></textarea>
</div>
<div class="container">
    <div class="heading" onclick="toggleSiblings(this)">heading</div>
    <div class="collapsible"></div>
</div>

toggleSibblings（） 用一个"可折叠"类遍历所有同级，并在它们上切换"折叠"类。"折叠"类只是将高度设置为 0px

这是一个jsfiddle来显示我的问题：http://jsfiddle.net/447n50cy/

谁能告诉我为什么文本区域占用了额外的空间？

将float:left;或display:block;与过渡到padding:0;一起会导致它崩溃。作为内联块元素，它存在正确折叠的问题。

Textarea 默认具有边距和填充：

您可以重置文本区域：

textarea {
margin:0;
padding:0;
outline:0;
}

把它添加到你的小提琴中。问题是，当人们在文本区域中输入某些内容时，您可能需要一些填充。你可以很容易地使用jQuery来添加和删除类。

相关文章：