今天想写一段前端的效果，然后就手动使用原生JavaScript生成了一些HTML的DOM，其中有一些是带有display:none;隐藏的css属性的，我的本意是想隐藏这些元素并且不占用空间，但是使用JavaScript动态生成的DOM，动态添加的css属性display:none;的话，元素就会发生只隐藏但空间占用的情况还是存在。
原本使用CSS的"display: none"属性可以隐藏元素并且不占用空间，这意味着该元素在页面中不可见，并且在页面布局中也不会占用任何空间。这是因为"display: none"属性会将元素完全从文档流中移除，使其在页面上不再存在，因此不会影响页面布局。
如果使用CSS的"visibility: hidden"属性隐藏元素，则元素仍然会保留其空间，并占用其在页面布局中的位置，只是元素在页面上不可见。因此，如果您希望隐藏元素但不希望它占用任何空间，则应该使用"display: none"而不是"visibility: hidden"。
需要注意的是:如果您使用JavaScript在运行时动态更改元素的"display"属性，由于JavaScript会影响页面布局，所以此时元素可能会重新占用其在页面布局中的空间。因此，在使用JavaScript动态更改"display"属性时，应该谨慎考虑其对页面布局的影响。