在網頁設計中，插入圖片是必不可少的。而對于圖片的自動補位設置，也是一個十分重要的問題。下面我們來介紹一下如何使用 HTML 來設置圖片的自動補位。

<img src="example.jpg" alt="example" width="200" height="150" style="float:right; margin:10px">

如上所示，我們可以使用 "float:right" 讓圖片靠右對齊，使用 "margin:10px" 設置圖片與文字的距離為 10 像素。

<img src="example.jpg" alt="example" width="200" height="150" style="float:left; margin:10px">

如果我們想讓圖片靠左對齊，只需要將 "float:right" 改為 "float:left" 即可。這樣的設置可以使圖片與文字更加緊密，不會出現過多的空白。

<img src="example.jpg" alt="example" width="200" height="150" style="display:block; margin:auto">

除了左右對齊之外，我們還可以使用 "display:block" 讓圖片居中對齊。使用 "margin:auto" 給圖片設置邊距，這樣就可以讓圖片在瀏覽器中居中顯示。

總之，對于任何網頁設計師來說，了解如何設置圖片的自動補位都是非常重要的。通過上述的示例代碼，相信大家已經掌握了相關的技能。