在HTML界面設計中，距離是一個非常重要的概念。距離的設置不僅能夠美化網頁，還能夠提高閱讀體驗，提高用戶體驗度。那么在HTML中，我們如何自由設置距離呢？

/* 1. 使用margin屬性 */
margin: 20px;
/* 設置元素的上下左右外邊距都為20px */
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
/* 分別設置元素上下左右的外邊距 */
/* 2. 使用padding屬性 */
padding: 20px;
/* 設置元素的上下左右內邊距都為20px */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* 分別設置元素上下左右的內邊距 */

除了使用margin和padding屬性，我們還可以使用其他方式來設置距離。例如使用  實現空格，使用border屬性設置元素的邊框等等。在實際開發中，我們需要根據實際需求選擇合適的距離設置方式，同時要注意距離設置的合理性，避免出現排版混亂的情況。