# data[].attributes.body
第二題：90px
第三題：36+48*2+90=222px
第四題：50+3+20*2=93px

# data[].attributes.body
.wrap, .header, .main, .footer {
width: 500px;
margin: 0 auto;
}

h2, p {
font-size: 20px;
}

# data[].attributes.body
Codepen 修改結果

修改重點：
* 獨立出一個 class 為 outbox
* 新增 .pt10 和 .pb10

.outbox {
width: 500px;
margin: 0 auto;
}

.pt10{
padding-top: 10px;
}

.pb10{
padding-bottom: 10px;
}

# data[].attributes.body
第二題：92~93px
第三題：36+16*1.5*2+24+90=198px
第四題：
width: 50+3+20*2=93px
height: 50+3+20*2=93px

# data[].attributes.body
Codepen
.wrap{
width: 500px;
margin: 0 auto;
font-size: 20px;
}

# data[].attributes.body
Codepen

修改重點：
刪除 .wrap
新增 .container

# data[].attributes.body
Codepen排版結果

# data[].attributes.body
Codepen 排版結果

用 flexbox 排版 Pixel Perfect Kata

# data[].attributes.body
第三題 :
(24+36)+(16*1.5+24)+90=198
第四題
寬度 : 50+3(br)+20*2=93
高度 : 50+3(bb)+20*2=93

# data[].attributes.body
.wrap{
width: 500px;
margin: 0 auto;
font-size:20px;
}

# data[].attributes.body
這是我的第三次練習

# data[].attributes.body
第二題

92~93px

第三題

36+(16*1.5*2)+24+90=198

第四題

Width:50+3+20*2=93

Height:50+3+20*2=93

# data[].attributes.body
codepen
body{
font-size: 20px;
}
.wrap{
width: 500px;
margin: 0 auto;
}

# data[].attributes.body
codepen

# data[].attributes.body
2. (2)
3. 36 + (1.6 * 1.5 + 24) * 2 + 90 = 222 (px)
4. 50 + 20 * 2 + 3 = 93 (px)
5.

h2, p {fz20}
.wrap {
  w500
  m0-a
}

6.
code
del .wrap
del .*outbox
add .p*
add .m*
add .center
7.

code

# data[].attributes.body
Q2 :  92-93px

Q3:  198px
36+ 2x(16*1.5) +24 +90 = 198

Q4
50+  2x20 + 3 = 93
高度：93px
寬度：93px

Q5
.wrap{
width: 500px;
margin: 0 auto;
}

h2, p{
font-size: 20px;
}

Q6
codepan

Q7

還沒開始

# data[].attributes.body
晚點做XD

# data[].attributes.body
Q3:90+36+24+(16*1.5)*2+24=198px

Q4:
寬:50+3+20*2=93px
高:50+3+20*2=93px

Q5:
.wrap{
width: 500px;
margin: 0 auto;
font-size: 20px;
}
Q6: