Use of display:none but still keep the space used

Question

I have a span with display:none but still need its height & width, is there a way to achieve it without changing the display or using 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>

I need the height of the span so that there's always a distance between divs like in visibility=hidden.

Answer 1

display:none; does NOT take any space, as you can see in your own snippet. visibility: hidden however, DOES use the empty space.

.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>

Addition: If you want the empty space without using visibility: hidden, you can just create a tag with only   as its content and no extra display parameter