# Margin、Border、Padding
### 主講人：黃夙賢
---
## Div 區塊標籤
- \<div\>...\<\/div\>是html裡面的區塊tag，可以輕易地切割出區塊
- 如果沒有指定display(顯示)方式，div區塊是橫跨整個畫面
---
```html=
<html>
<head><title>div區塊</title>
<style>
#bg1{
height:500px;
background-color:lightgray;
}
</style>
</head>
<body>
<div id="bg1"></div>
<div id="bg1"></div>
<div id="bg1"></div>
</body>
</html>
```
---
## CSS Box Model
- 所有的CSS元素都可以視為Box(方框盒子)，可以精細的控制元素間的邊界、距離、留白
- 每個元素包含：Content(內容)、Padding(留白)、Border(邊框)、Margin(邊界)
---
## Border(邊框)
- 元素的邊框
- 可單獨設定上下左右的屬性
- border-style：線條樣式(solid(實線)、dotted(點)、dashed(-)、double(雙線))
- border-width：線條寬度(px)
- border-color:線條顏色
- border-radius：圓角設定(px)
- Border綜合寫法：•{border-width, border-style (required), border-color}
---
---
## Border範例
```html=
<html>
<head>
<title>Border</title>
<style>
#b1{
height: 100px;
border-width: 2px;
border-style:dotted;
border-color: blue;
border-radius: 10px;
}
#b2{
height: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div id='b1'></div>
<div id='b2'></div>
</body>
</html>
```
---
## Padding(留白)
- 可單獨設定上下左右的距離
- Padding-top：與內部元素上方的距離
- Padding-right：與內部元素右邊的距離
- Padding-bottom：與內部元素下方的距離
- Padding-left：與內部元素左邊的距離
- 綜和寫法：
- padding: 10px;(上下左右留白10px)
- padding: 20px 10px; (上下留白20px, 左右留白10px)
- padding: 10px 20px 30px 40px;(上留白10px,右留白20px,下留白30px,左留白40px)
---
```html=
<html>
<head>
<title>Border</title>
<style>
#b1{
height:730px;
background-image:url(https://github.com/shhuangmust/html/raw/111-1/slider1.JPG);
}
h1{
color:white;
padding: 30px 50px;
}
h2{
color:brown;
padding: 10px 50px;
}
</style>
</head>
<body>
<div id='b1'>
<h1>加入明新 成為明星</h1>
<h2>明新科技大學歡迎你的參與</h2>
</div>
</body>
</html>
```
---
## Margin(邊界)
- 元素的外邊界距離
- margin-top：與上方元素的距離
- margin-right：與右方元素的距離
- margin-bottom：與下方元素的距離
- margin-left：與左方元素的距離
- margin:auto(讓瀏覽器決定邊界距離，可置中)
- div有留邊，通常是body的margin沒設成0
---
```html=
<html>
<head>
<title>Margin</title>
<style>
body{
margin:0px;
}
#b1{
background-color:lightgray;
height: 100px;
line-height:100px;
}
#slogan{
width:400px;
margin:auto;
font-size:35px;
color:blue;
text-align:center;
//border:1px red solid
}
</style>
</head>
<body>
<div id='b1'><div id='slogan'>明新科技大學</div></div>
</body>
</html>
```
---
## [DIV範例](https://github.com/shhuangmust/html/blob/master/33.div.html)
- 階層式css引用法。例如： #b1 h1
- div內的元素margin要設為0px
---
```html=
<html>
<head>
<title>Div</title>
<style>
body {
margin: 0px;
}
#b1 {
background-color: lightgray;
height: 100px;
line-height: 100px; //高度置中的訣竅，把行高設定跟height相同
}
#b1 h1 {
width: 400px;
margin: auto; //高度置中的第二訣竅
color: blue;
text-align: center;
//border:1px red solid;
}
#b3 {
height: 730px;
background-image: url(https://github.com/shhuangmust/html/raw/111-1/slider1.JPG);
}
#b3 h2 {
color: white;
padding: 50px 150px;
margin: 0px; //會影響#b2的margin
}
#b5 {
height: 70px;
line-height: 70px;
background-color: gray;
}
#b5 h4 {
color: white;
text-align: center;
margin: 0px;
}
</style>
</head>
<body>
<div id='b1'>
<h1>明新科技大學</h1>
</div>
<div id="b3">
<h2>加入明新 成為明星</h2>
</div>
<div id="b5">
<h4>明新科技大學資訊管理系 版權所有© All Rights Reserved. Designed and Maintained by IM MUST</h4>
</div>
</body>
</html>
```
{"metaMigratedAt":"2023-06-17T14:45:19.579Z","metaMigratedFrom":"YAML","title":"Margin、Border、Padding","breaks":true,"description":"所有的CSS元素都可以視為Box(方框盒子)，可以精細的控制元素間的邊界、距離、留白","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":6395,\"del\":2001,\"latestUpdatedAt\":1763434945337}]"}