CSS是一種用于設計網頁布局和樣式的語言。在網頁設計中，有時我們需要控制頁面的頂部距離，以便在頁面中展現更好的視覺效果。那么，如何使用CSS控制頁面頂部距離呢？下面是一些示例代碼：

p {
margin-top: 50px; /*設置p標簽與頁面頂部的距離為50個像素*/
}
#header {
position: fixed; /*設置header標簽為固定定位*/
top: 0; /*將header標簽置于頁面頂部*/
left: 0; /*將header標簽置于頁面左側*/
width: 100%; /*將header標簽的寬度設置為100%*/
}
#footer {
position: absolute; /*設置footer標簽為絕對定位*/
bottom: 0; /*將footer標簽置于頁面底部*/
left: 0; /*將footer標簽置于頁面左側*/
width: 100%; /*將footer標簽的寬度設置為100%*/
}

在上述示例代碼中，我們可以使用margin-top屬性來控制p標簽與頁面頂部的距離。此外，我們還可以使用CSS的position屬性和相關屬性值來固定header標簽在頁面頂部、將footer標簽置于頁面底部，從而控制它們與頁面頂部的距離。 總之，在設計網頁布局和樣式時，我們可以借助CSS的各種屬性和值來控制頁面元素的位置和大小，以達到更好的視覺效果。