使 HTML 元素不可见且不占用布局空间答案

【问题标题】：Make an HTML element invisible and not take up space in layout使 HTML 元素不可见且不占用布局空间
【发布时间】：2021-03-20 01:46:43
【问题描述】：

我有这个：

 <div class="pane">
    <!-- other elements -->
        <textarea class="editor invisible">Start Writing here</textarea>
        <div class="v-container visible default background-image">
 </div>

CSS：

.editor {
    margin: 0;
    overflow: auto;
    outline: none;
    resize: none;
    border: none;
    position: relative;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.007);
    padding: 8px 8px 8px 8px;
    width: 100%;
    height: 100%;
}

.editor::selection {
    background-color: rgba(0, 0, 0, 0.164);
}

.default {
    background-color: rgba(0, 0, 0, 0.103);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.background-image {
    background-image: url('../graphics/Note.png');
    background-position: center;
    background-repeat: no-repeat;
}

我希望当 textarea 可见时，pane 中的其他子元素将不可见并且根本不占用布局空间。我尝试使用 visibility: hidden 和 visibility: visible，但是当 textarea 不可见时，窗口上仍然有一个空白区域。

【问题讨论】：

标签： html css

【解决方案1】：

您应该使用 display:none 来防止它占用空间。

display: none

【讨论】：

【解决方案2】：

使用display: none会使其不可见，不会占用任何空间。

【讨论】：