使用显示：无但仍保留已用空间

Question

我有一个跨度，display:none但仍然需要它的高度和宽度，有没有办法在不改变显示或使用的情况下实现它visibility:hidden？

.mySpan{
   display:none;
}

<div>
  <label>Name</label>
  <input type="text" id="personName" name="personName" />
  <br/>
  <span class="mySpan">Text that can be displayed or not</span>
</div>
<div>
  <label>Last name</label>
  <input type="text" id="personLastName" name="personLastName" />
  <br/>
  <span class="mySpan">Text that can be displayed or not</span>
</div>

我需要跨度的高度，以便在 div 之间始终存在距离visibility=hidden。

Answer 1

display:none;不占用任何空间，正如您在自己的代码段中看到的那样。 visibility: hidden但是，确实使用了空白空间。

.mySpan1 {
display: none; 
}
.mySpan2 {
visibility: hidden; 
}

<div>
<label>Name</label>
<input type="text" id="personName" name="personName" />
<br/>
<span class="mySpan1">Text that can be displayed or not</span> text after display: none
</div>
<div>
<label>Last name</label>
<input type="text" id="personLastName" name="personLastName" />
<br/>
<span class="mySpan2">Text that can be displayed or not</span> text after visibility: hidden;
</div>

补充：如果你想要不使用的空白空间visibility: hidden，你可以只创建一个标签 作为它的内容而不需要额外的显示参数