Javascript 将内容添加到div会导致其移动吗？

在下面的代码中，我有一个简单的页面设置，但是只要我用class

page

向

div

添加一些内容，整个主页

div

就会向下移动

尝试使用class

页面将
hello
添加到
div

有什么问题，div应该留在那里，只需添加
hello

代码：


.container{
宽度：100%；
背景色：#d5d5d5；
}
.餐具柜{
宽度：300PX；
高度：2000px；
显示：内联块；
框大小：边框框；
填充物：5px；
右侧填充：2px；
}
.innersidebarcontainer{
位置：相对位置；
宽度：100%；
身高：100%；
}
.侧边栏{
宽度：293px；
背景色：白色；
高度：500px；
顶部：1px；
位置：绝对位置；
}
.主页{
宽度：计算（100%-300px）；
填充物：5px；
左侧填充：2px；
高度：2000px；
显示：内联块；
框大小：边框框；
}
.第页{
宽度：100%；
身高：100%；
背景色：白色；
}
.页脚{
高度：500px；
宽度：100%；
保证金：0自动；
背景色：#031003；
}
是的，有一个技巧：

.mainpage{
  vertical-align : top; // Add this
}

另外，更改H1显示属性：

h1{
  display : inline-block;
}

所有元素都保持在它们应该在的位置。CSS的乐趣

是的，有一个窍门：

.mainpage{
  vertical-align : top; // Add this
}

另外，更改H1显示属性：

h1{
  display : inline-block;
}

所有元素都保持在它们应该在的位置。CSS的乐趣

正常，显示：内联块在元素之间添加一点空间（您没有更多空间）。
改为使用float left，代码就能正常工作。
是正常的，display:inline block在元素之间添加一点空间（您没有更多的空间）。
改用float left，代码就能正常工作。
但问题出在哪里呢！这是如何解决问题的呢？但是如果你仍然添加
一些东西，它仍然会向下移动一点？啊，那是因为
h1
有一个嵌入的边距顶部，如果你取消它，它会工作：但无论如何，浮点、内联块和其他传统CSS属性都是一团乱。Flex（flexbox）是所有布局问题的解决方案。但是整个h1和页边距不应该保留在PageDiv中吗？但是问题出在哪里呢！这是如何解决问题的呢？但是如果你仍然添加
一些东西，它仍然会向下移动一点？啊，那是因为
h1
有一个嵌入的边距顶部，如果你取消它，它会工作：但无论如何，浮点、内联块和其他传统CSS属性都是一团乱。Flex（flexbox）是所有布局问题的解决方案。但是整个h1和页边距不应该留在页面div中吗？Float、inline block和其他传统CSS属性都是一团糟。Flex是所有布局问题的解决方案。不管怎样，浮点、内联块和其他传统CSS属性都是一团糟。Flex是所有布局问题的解决方案。