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

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

更新於 發佈於 閱讀時間約 2 分鐘

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

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

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


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

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

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

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

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

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

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

以下圖為範例

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

raw-image


至於設定的程式碼,因為目前大多都是使用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)

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

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




avatar-img
O 記
2會員
3內容數
留言
avatar-img
留言分享你的想法!
本篇參與的主題活動
隨著夏天的腳步逼近,是不是也感覺到空氣中那股濕熱的黏膩感了呢?這種天氣下,如果還噴上秋冬常用的濃郁木質調或甜膩美食調香水,不只自己覺得悶,旁人可能也會有點「窒息」感。夏天,我們需要的是能帶來清爽、愉悅感受,彷彿一陣微風拂過的「降溫系」香氣! 但是,什麼樣的香水才適合夏天?
隨著夏天的腳步逼近,是不是也感覺到空氣中那股濕熱的黏膩感了呢?這種天氣下,如果還噴上秋冬常用的濃郁木質調或甜膩美食調香水,不只自己覺得悶,旁人可能也會有點「窒息」感。夏天,我們需要的是能帶來清爽、愉悅感受,彷彿一陣微風拂過的「降溫系」香氣! 但是,什麼樣的香水才適合夏天?