網頁設計中常常需要使用輸入框，這里我們想要講解的是輸入框的外邊距。CSS中，外邊距可以控制元素與周圍元素的距離。在輸入框中，外邊距也是可以很靈活地控制的。

首先，我們來看一下如何設置輸入框的外邊距：

input {
margin: 10px; /* 上下左右都設置了10px的外邊距 */
}

上面這段代碼可以讓一個輸入框四周都留出10px的外邊距。我們也可以只設置上下或者左右方向的外邊距：

input {
margin-top: 10px;
margin-bottom: 20px;
}

上面這段代碼可以讓一個輸入框頂部留出10px的外邊距，底部留出20px的外邊距。同樣地，我們也可以控制左右方向的外邊距。

除了設置具體的數值外，我們還可以使用百分比來設置外邊距。這里我們以設置左右方向為例：

input {
margin-left: 20%;
margin-right: 20%;
}

上面這段代碼可以讓一個輸入框左右兩側各留出其父元素寬度的20%作為外邊距。

最后，我們需要提醒的是，當我們設置了輸入框的外邊距之后，它的寬度和高度可能會受到影響。如果你想要確保輸入框的尺寸不變，可以使用box-sizing屬性來控制盒模型的計算方式。

input {
box-sizing: border-box;
margin: 10px;
}

上面這段代碼的box-sizing屬性設置為border-box，可以讓輸入框的寬度和高度包括邊框和內邊距在內，這樣就不會因為外邊距的增加而改變輸入框的尺寸了。