# 20230415 CSS margin/padding/border
### 容器與邊界
不同元素之間的距離->元素外部邊界
#### margin

margin-top 上邊界
margin-right 右邊界
margin-bottom 下邊界
margin-left 左邊界

margin (上)(右)(下)(左)
margin (上下)(左右)
margin (上)(左右)(下)
margin (上下左右)

#### padding
元素內容與本身間的距離->元素內部邊界

padding-top 上內距
padding-bottom 下內距
padding-left 左內距
padding-right 右內距

padding (上)(下)(左)(右)
padding (上下)(左右)
padding (上)(左右)(下)
padding (上下左右)

#### border
元素外框線->元素本身到外部(Margin)之間

##### border-width 框線寬度
適用上下左右四規則，或是拆分成以下

border-top-width 上框線寬
border-right-width 右框線寬
boeder-bottom-width 下框線寬

###### border-color框線顏色
適用上下左右四規則，或是拆分成以下

border-top-style 上框線樣式
border-right-style 右框線樣式
border-bottom-style 下框線樣式
boerder-left-style 左框線樣式

樣式如下

##### border(粗細)(顏色)(樣式)
可再拆分上下左右不同樣式
border-top 上框線
border-right 右框線
border-bottom 下框線
border-left 左框線


#### 梯形
將兩側顏色屬性變成：transparent

#### 三角形
將兩側顏色屬性變成：transparent、div的寬設置為0

##### border-radius 邊框圓角弧度

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角

border-radius(左上角)(右上角)(右下角)(左下角)
border-radius(左上右下角)(右上左下角)
border-radius(左上角)(右上左下角)(右下角)
border-radius(四角)

border-radius 水平曲度/垂直曲度