Html 处理可变内容边距的最佳实践方法？

好的，我为一个朋友创建的一个快速站点有大约20个静态页面。每一个都有少量的内容。div容器包含div内容，而div内容显然包含每个页面上更改的内容

现在，根据内容的长度，我希望顶部有不同的边距。内容越少，则边距越大。只是一种审美选择。例如，如果内容几乎填满了静态大小的容器，则填充会更少，但一行内容页面可能是静态容器的1/3。将内容集中在div中是不行的，因为这样会产生太大的边距

处理这个问题的最好方法是什么？每个内容都有一个新的类，并且有不同的边距？一个新的Id，以便它在自己的特殊div中以不同的方式定位或边缘化？每个页面上的内联css覆盖div内容的标准css？在每个页面上的内容之前，容器中有不同的分隔符div吗？按照内容边距=（ContainerHeight-ContentHeight）/3编写某种脚本

---

什么是可以接受的方法？我不想养成坏习惯。

如果javascript是一个选项，您可以计算内容框的高度，并根据您喜欢的公式设置上边距

在jquery中，它类似于：

c_height = $("#Content").height();
c_margin = Math.floor( /* your formula */ );
$("#Content").css("margin-top", c_margin + "px");

---

（关于

“px”

部分不太确定…

我会选择简单的方法，全局定义一个单独的上边距，使用内联CSS覆盖需要它的页面。假设您最终编辑了一行页面中的一行，以添加更多内容——在这种情况下，您可能希望更改该页面的布局，而不是其他页面，因此更改也可能就在页面本身中

另一方面，如果您选择（比如）三种页边空白大小，并根据每一页的内容量为每一页分配一种页边空白大小，那么页面可能会感觉更有用、更一致。然后，当您扩展一个单行程序时，您可以简单地将它的类从小边距更改为中等边距，因此将像

div.smallVMargin

这样的类放在中心样式表中是有意义的。您要避免的是一个包含类的外部CSS文件，如

div.page16

或

div.margin25px