间距问题

Question

我有一个带有边距和填充的div。我想隐藏div中的内容。我正在使用js来显示，隐藏进程。问题是当我试图隐藏内容时，它会被隐藏但间距或间隙保持不变。 Firefox渲染正确，但不是。我怎样才能解决这个问题，即使用css？

Answer 1

如果从div中删除内容，可能会在某些brwosers中完全隐藏边距和填充，但在其他brwos中保持可见边距和填充。

您可以尝试将显示样式应用于div：

<div style="display:none;">
    text...
</div>

它会完全消失。

Answer 2

你可以使用嵌套的div，在父div中放置你不想隐藏的填充和边距，以及你想隐藏在子div中的填充和边距，只用你的javascript隐藏子div。

Answer 3

尝试删除内容和，将容器的填充设置为0。

或者，为了让事情变得更加整洁;从容器div中删除边距，添加一个具有相同边距值但作为填充属性的包装div，并简单地显示/隐藏容器div。

CSS

#wrapper, #container{
    padding:1em;
}

---

<强> HTML

<div id="wrapper">
    <div id="container">This is the content that will be hidden</div>
</div>

Answer 4

我可能会错误地阅读你的问题，但我假设，因为“间距和间隙保持（sic）相同，”你正在使用

#style {visibility: hidden; }

如果您使用

#style {display: none; }

任何具有风格ID的内容都将从文档中完全删除，而不是简单地从hidden中删除。