強迫症工程師的筆記:UI介面設計-Padding與Margin的差別

近期參與公司的專案開發，開始使用VB.Net來做介面設計與資料分析

身為有一點點強迫症的我，對於UI上GroupBox內的所放入的TextBox也好、DataGridview也好，總會希望與其他的控制元件可以整整齊齊對在同一條線上。

雖然有好用的拖拉控制元件，但常常盯著我的眼睛實在快要爆炸了。

於是花了點時間看一下Padding與Margin的差異，發現其實不難，就是理解為元件與別個元件的距離，而這距離又分為向外擴展與向內縮進。

用講的肯定還是一知半解，直接進圖片模式最快

下圖的最外框是一個GroupBox(黑色)，裡面包有一個Textbox

Padding可以理解Textbox這個元件本身，與內部任何元件的一個界線

Margin可以理解為Textbox元件本身，與外部任何元件的一個界線

這個界線呢，依照順序可以由元件左邊、上邊、右邊與下邊分別四個界線值可以設定

設定完後，任何元件都不會超出這個界線範圍，因此也可以理解為，各個元件的間隔

以下圖為範例

藍色區塊是Textbox的padding範圍，紅色區塊則是Margin的範圍

至於設定的程式碼，因為目前大多都是使用VB.net，因此以下用VB的當作範例

上圖若希望TextBox各邊的Padding為5，Margin為3，可以這樣設定

Dim paddingSize As Integer = 5
Dim marginSize As Integer = 3
Textbox.Padding = New Padding(paddingSize)
Textbox.Margin = New Padding(marginSize)

如果希望邊界的值都不一樣，例如希望Padding依照順序分別為5,3,10,1的話，只要設定

Textbox.Padding = New Padding(5,3,10,1)

因此只要藉由這個設定，在進行元件排列時就可以很好的去調整各個元件的位置

甚至是排列時，也可以這樣做設定，就不會因為強迫症而看著不舒服了（呼)