Question

有一个顶部（徽标，菜单等），然后是内容，然后是底部的东西。我该如何做到内容到顶部之间的空间和内容到底部之间的空间，会是一样的吗？

谢谢！

Answer 1

您正在寻找CSS margin属性来相互间隔内容。

Padding也是如此，但在元素中而不是在元素内。

您想要什么（基于评论中的 html ）

#content {
    margin: 20px 0;
}

如果在拥有此空间时内容也必须居中，您可以将0更改为auto，如下所示：

#content {
    margin: 20px auto;
}

这并不难，googling for about 1.4 seconds在寻找元素之间的空间时给了我一个好结果。

在这里@ SO我们用爱来回答每一个问题，除了那些没有展示研究或努力的问题，似乎你已经付出了努力提供了你的内容但是已经有关于它的 on stackoverflow （所以你'再问同样的问题 - 在发布之前 - 检查互联网＆lt; 3）

Answer 2

可能想要这样的东西，但没有一些参考代码，它很难帮助。

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Answer 3

您可以使用CSS margin或padding，具体取决于您要实现的结果，方法是将相同的值设置为top和bottom padding或{ {1}}

JS Fiddle

margin

body {
  padding: 0;
  margin: 0;
}
#top {
  background-color: orange;
  width: 100%;
  height: 100px;
}
#content {
  width: 100%;
  background-color: #090;
  padding: 100px 0 100px 0;/* padding top, right, bottom, left values*/
}
#bottom {
  width: 100%;
  height: 100px;
  background-color: #999;
}

<div id="top">Top</div> <div id="content">Content <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odio, quidem totam fugit officiis expedita atque ullam quae. Rem, quasi distinctio suscipit. Qui cupiditate dolores quod fugiat accusantium nobis esse.</div> <div id="bottom">Bottom</div>将其值均匀地添加到padding以在顶部和底部保持相同的距离，但是如果您不想拉伸div#content并且只是在顶部有空格然后在其底部用JS Fiddle 2

替换div#content CSS行

padding

如何在顶部和底部之间做平等空间

3 个答案: