如何在不占用空间的情况下隐藏 HTML 元素 [重复]答案

【问题标题】：How to hide HTML elements without taking space [duplicate]如何在不占用空间的情况下隐藏 HTML 元素 [重复]
【发布时间】：2014-05-26 10:21:45
【问题描述】：

我有一个 HTML 段落，最初我想隐藏它。稍后在单击事件中，我希望通过隐藏它来显示或显示这次存在其他段落的位置。但是当我尝试将可见性属性设置为隐藏时，那个时候段落也占用了我不想要的空间和高度，宽度..

这是示例段落..

<div id="TeamsDesc" style="visibility: hidden;">
            <p id="Billing" style="float:left;color: #666666; width:700px; font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold; border-right: thin dotted #666666; line-height: 18px;">

             Paragraph Contents

            </p>
</div>

如果我在网页末尾添加它，那会增加不想要的网页高度..

【问题讨论】：

哦，是的内联样式！无论如何，替换可见性：隐藏；有显示：无；
请避免使用内联样式。它添加了重复的代码，使您的代码难以阅读并且难以为他人使用。 Why Use CSS

标签： jquery html css

【解决方案1】：

应用display:none 而不是visibility:hidden

visibility:hidden 元素将不可见，但会被渲染并占用相应的空间，display:none 元素将存在于 DOM 中，但不会在全部，不会占用空间。

根据 cmets 更新

$('button').click(function(){
 $('#para1').hide();
 $('#Billing').show();
})

【讨论】：

如何通过隐藏其他元素在按钮单击时显示它。请参阅我更新的帖子
您想在单击按钮时显示/隐藏它吗？不知道你到底想从问题中做什么，你能说得更清楚吗..？
是的，我想隐藏一个 id 为“para1”的段落，并在点击按钮时显示这个 div“Billing”。如何实现这一点？
@user3664608 检查更新...
一个疑问先生我如何将此元素添加到另一个 id 为“#BodyDesc”的 div，因为我希望这个隐藏元素显示在 DIV 中定义的特定位置

【解决方案2】：

如果您不希望元素在未显示时占用空间，您可以使用display:none 而不是visibility: hidden。要显示元素，您需要display:block

<div id="TeamsDesc" style="display: none;">
    <p id="Billing" style="float:left;color: #666666; width:700px; font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold; border-right: thin dotted #666666; line-height: 18px;">Paragraph Contents</p>
</div>

display 的一些可能值

display: none    
display: inline
display: block   
display: inline-block  
display: inherit

你可以阅读更多关于显示here

【讨论】：