HTML中可以通過設置圖片的偏移來調整其位置和布局。在本文中，我們將介紹通過CSS樣式和行內樣式來實現圖片偏移的方式。 通過CSS樣式設置圖片偏移 CSS樣式可以分別用于設置圖片的水平和垂直方向的偏移值。下面是一個示例CSS樣式： ```html``` 通過該樣式，我們可以將class為"my-image"的圖片向左偏移50px，向上偏移20px。其中，`position`屬性被設置為`relative`，表示參考圖片原來的位置進行偏移。 將樣式應用于圖片的方式如下所示： ```html

``` 通過行內樣式設置圖片偏移 在img標簽中可以直接使用行內樣式來設置圖片偏移。下面是一個示例行內樣式： ```html

``` 通過該行內樣式，我們同樣可以將圖片向左偏移50px，向上偏移20px。 需要注意的是，使用行內樣式會讓代碼難以維護。因此，在實際開發中，我們建議使用CSS樣式來設置圖片偏移。 總結 本文介紹了通過CSS樣式和行內樣式來設置圖片偏移的方法。使用CSS樣式可以分別設置圖片的水平和垂直方向的偏移值。而行內樣式雖然直觀，但是不易維護，建議使用時慎重。

代碼：<style>
.my-image {
position: relative;
left: 50px;
top: 20px;
}
</style>
<p><img class="my-image" src="image.jpg" alt="示例圖片" /></p>
<p><img src="image.jpg" alt="示例圖片" style="position: relative; left: 50px; top: 20px;" /></p>