CSS是网页设计中的必备技能之一，其中一个重要的应用便是设置网页元素的位置。在网页中，图片经常会出现在不同的位置，那么如何设置图片距离顶部的高度呢？这里就介绍一些基本的方法。

img {
margin-top: 100px;
}

方法一：使用margin-top属性

margin-top属性可以设置元素上方的外边距，因此可以用来控制图片距离顶部的高度。在上面的代码中，margin-top被设置为100像素，这意味着图片距离顶部的高度为100像素。

img {
top: 100px;
position: relative;
}

方法二：使用position属性

position属性可以设置元素的定位方式，如果将元素的position设置为relative，并通过top属性将图片向下移动100像素，则图片距离顶部的高度为100像素。需要注意的是，relative定位不会改变文档流中元素的位置。

img {
top: 100px;
position: absolute;
}

方法三：使用绝对定位（position:absolute）

与relative定位不同，绝对定位会将元素从文档流中移除，并相对于最近的具有定位属性的祖先元素进行定位。通过将position属性设置为absolute，并通过top属性将图片向下移动100像素，则图片距离顶部的高度为100像素。需要注意的是，绝对定位会改变文档流中元素的位置。

总结

以上是三种常用的CSS设置图片距离顶部高度的方法。根据实际需求，可以选择其中一种或多种方法来实现元素位置的控制。在使用时，需要着重考虑多个元素的布局、响应式设计等因素，以达到最佳的视觉效果。