Padding
๋ด๋ถ ์ฌ๋ฐฑ์ ์ง์ ํ๋ ์์ฑ
์ปจํ
์ธ ์ ํ
๋๋ฆฌ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์ ์ดํ๋ ์ญํ ์ ํฉ๋๋ค.
์ถ์ฝํ 4๊ฐ์ง ๊ฐ ์ง์ ๋ฐฉ๋ฒ
โข
padding์ ์ถ์ฝํ์ผ๋ก ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ๋ค์ ๋ค ๊ฐ์ง ๋ฐฉ์์ผ๋ก ๊ฐ์ ์ง์ ํ ์ ์์ต๋๋ค:
1.
1๊ฐ์ ๊ฐ: ๋ชจ๋ ๋ฐฉํฅ(์, ํ, ์ข, ์ฐ)์ ๋์ผํ ๊ฐ์ ์ ์ฉ.
โข
์์: padding: 10px; โ ์ํ์ข์ฐ ๋ชจ๋ 10px.
2.
2๊ฐ์ ๊ฐ: ์ฒซ ๋ฒ์งธ ๊ฐ์ ์ํ, ๋ ๋ฒ์งธ ๊ฐ์ ์ข์ฐ์ ์ ์ฉ.
โข
์์: padding: 10px 20px; โ ์ํ 10px, ์ข์ฐ 20px.
3.
3๊ฐ์ ๊ฐ: ์ฒซ ๋ฒ์งธ ๊ฐ์ ์, ๋ ๋ฒ์งธ ๊ฐ์ ์ข์ฐ, ์ธ ๋ฒ์งธ ๊ฐ์ ํ์ ์ ์ฉ.
โข
์์: padding: 10px 20px 30px; โ ์ 10px, ์ข์ฐ 20px, ํ 30px.
4.
4๊ฐ์ ๊ฐ: ์, ์ฐ, ํ, ์ข ์์๋ก ๊ฐ๊ฐ์ ๊ฐ ์ ์ฉ.
โข
์์: padding: 10px 20px 30px 40px; โ ์ 10px, ์ฐ 20px, ํ 30px, ์ข 40px.
๊ฐ๋ณ ์์ฑ
โข
padding์ ๋ค ๊ฐ์ง ๋ฐฉํฅ์ ๋ํด ๊ฐ๋ณ์ ์ผ๋ก ๊ฐ์ ์ค์ ํ ์ ์์ต๋๋ค:
โฆ
padding-top: ์์ชฝ ์ฌ๋ฐฑ.
โฆ
padding-right: ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ.
โฆ
padding-bottom: ์๋์ชฝ ์ฌ๋ฐฑ.
โฆ
padding-left: ์ผ์ชฝ ์ฌ๋ฐฑ.
๊ธฐ๋ณธ์ ์ผ๋ก padding์ ๋ฐ์ค ๋ชจ๋ธ์์ ์์์ ํฌ๊ธฐ๋ฅผ ํ์ฅ์ํต๋๋ค. ์ฆ, ์ง์ ๋ width์ padding ๊ฐ์ด ๋ํด์ ธ์ ์ต์ข
์์์ ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋ฉ๋๋ค.
box-sizing ์์ฑ์ ์์์ ํฌ๊ธฐ ๊ณ์ฐ ๋ฐฉ์์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก box-sizing: border-box; ๋ก ์ง์ ํด์ผ,
width, height ๋ก ์ง์ ํ ํฌ๊ธฐ๊ฐ ์์์ ์ต์ข
ํฌ๊ธฐ๊ฐ ๋ฉ๋๋ค!
์์ฑ๊ฐ | ์ค๋ช
| ํฌ๊ธฐ ๊ณ์ฐ ๋ฐฉ์ |
content-box
(๊ธฐ๋ณธ๊ฐ) | ์์์ width์ height๋ ์ฝํ
์ธ ํฌ๊ธฐ๋ง์ ์๋ฏธํ๋ฉฐ, padding๊ณผ border๋ ํฌํจ๋์ง ์์. | ์ต์ข
ํฌ๊ธฐ = width + padding + border |
border-box | ์์์ width์ height์ padding๊ณผ border๊ฐ ํฌํจ๋์ด, ์ต์ข
ํฌ๊ธฐ๊ฐ ๊ณ ์ ๋จ. | ์ต์ข
ํฌ๊ธฐ = width |