# CSS Layout - content、padding、margin、border
###### tags: `CSS`
教學資源：
[CSS Layout](https://teamtreehouse.com/library/css-layout)
[CSS Box Model |W3 Schools](https://www.w3schools.com/css/css_boxmodel.asp)

可以將HTML中的每個元素視為一個矩形的方塊，下方程式H1可視為一個方盒被包覆在div的方盒中

<div>
    <h1>標題</h1>
</div>

打開頁面檢查中的樣式可以看到類似於下圖說明方盒的長寬、內外距、框線
* content 盒子的核心是內容
* padding 圍繞內容區域，==調整元素內部的間距==
* border 盒子最外層為邊框，預設是隱藏的
* margin 盒子外的空間，==調整元素與元素之間的距離==

## :pushpin:padding
### 使用

padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;

padding: 10px;
padding:10px 20px 30px 40px;
/*上右下左*/
padding: 10px 20px;
/*上下、左右*/

### 範例
HTML

<div class="news">
  <h1>新聞</h1>
  <p>Lorem ipsum dolor sit amet.</p>
  <a href="#">連結</a>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

CSS

*{
  border: solid 1px black;
}

.news{
  width: 300px;
  padding:10px;
}


## :pushpin:border

border-width: 10px;
border-style: solid;
border-color: ##ffa949;
/*輸入三個條件*/

border: 12px solid black
/*大多時候排序為 尺寸、樣式、顏色*/

`border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset`
不同的線條樣式，可在文件中查找

## :pushpin:margin
### 使用

margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;

margin: 10px;
margin:10px 20px 30px 40px;
/*上右下左*/
margin: 10px 20px;
/*上下、左右*/
margin: -5px;
/*可使用負數*/
margin: 0 auto
/*自動計算置中*/

### 範例
HTML=

<div class="news">
<h1>新聞</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi alias consequatur eius voluptatum doloremque!</p>
</div>

CSS

*{
  border: solid 1px black;
}
.news{
  width: 300px;
  margin-left: 30px;
}
.news p{
  color: orange;
  margin: 50px;
}


## :pushpin:content內容元素尺寸

img{
width:600px;
/*height不設置時圖片為高度為auto*/
}

### box-sizing: border-box
box尺寸從border向內計算
在設計時會因為輸入的padding、border而改變content的尺寸，此時使用`border-box`就可以免去計算方盒的大小

/* 全域border-box */
*, *::after, *::before {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-transition: all .2s;
	transition: all .2s;
}

可參照[伸縮自如的RWD排版術](https://hackmd.io/PyakYECOQSGqXvKITD0gew?view)