html - 使用显示器 :none but still keep the space used

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>

我需要 span 的高度，以便像 visibility=hidden 中那样，div 之间总是有距离。

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的情况下留空，你可以只创建一个只有 作为其内容并且没有额外显示参数的标签