[CSS輕鬆學]margin(外距屬性)使用方法詳解

上次提到過padding(內距)的使用方法這次我們來講margin(外距)

margin，中文叫＂外距＂，同樣是每個區塊都自動會有的屬性，預設是０，寫法格式和padding(內距)一模一樣

margin是用來設定當前區塊距離更外層區塊的距離，外距屬性並不會算做區塊的一部分，外距就只是單純的區塊與區塊之間的距離而已，如果使用ｈａｖｅｒ之類的屬性不會把margin所設定的區域納入進去

～～～人家是示範的分割線醬(っ・Д・)っ～～～

▶ margin的寫法

margin的寫法是和padding一模一樣的，只是開頭的部分改成了margin而已

margin:上 右 下 左;　

margin:上下 左右;　

margin:上 左右 下;　

margin:一個數字代表四個邊同樣値

margin-top：上方的內距

margin-right：右方的內距

margin-bottom：下方的內距

margin-left：左方的內距

ｐｓ：中文部分請自行換成數字，最後面記得加分號，兩往個數字之間用空格隔開

 

▶ margin的栗子

同樣來舉個栗子，假設橘色的區塊是我們設定margin屬性的區塊，而藍色部分的區塊則不設任何屬性

那麼橘色區塊設定：

margin:1px 2px 3px 4px;

那麼按照上面的語法，橘色的區塊距離外面的藍色區塊的上方１ｐｘ，距離右方２ｐｘ，距離下方３ｐｘ，距離左方４ｐｘ的距離