CSS是一种设置网页样式的语言，通过对网页元素的CSS设定可以让我们的网页更加美观和规范。今天，我们来谈谈CSS中如何设置元素距离页面顶部的距离。

在CSS中，我们可以使用margin-top属性来设置元素距离页面顶部的距离。margin-top表示元素上方的外边距，用来设置元素与上一级元素之间的距离。

首先，我们来看一下设置具体数值的情况。比如，我们想要让一个元素距离页面顶部100px：

.element {
margin-top: 100px;
}

如上述代码所示，我们只需要给该元素添加一个margin-top属性，然后设置具体的距离即可。

另外，我们也可以使用百分比来设置元素距离页面顶部的距离。比如，我们想要让一个元素距离页面顶部的距离为页面高度的10%：

.element {
margin-top: 10%;
}

如上述代码所示，我们只需要给该元素添加一个margin-top属性，并设置百分比即可。

需要注意的是，这种方法只能用于已知父元素的高度的情况，否则将无法准确计算该元素距离页面顶部的距离。

综上，通过CSS的margin-top属性，我们可以灵活设置元素距离页面顶部的距离。不同的数值和百分比都可以用来达到我们所需要的效果。