c04. CSS 마진, 패딩

CSS 마진, 패딩

CSS 마진 프로퍼티 (margin property) 는 테두리의 바깥쪽 여백의 크기를 설정 합니다.

마진은 완전히 투명해서 배경 색상을 갖을 수는 없습니다.

CSS 로 태그의 각 면 (위, 오른, 바닥, 왼쪽) 의 마진 (margin) 을 제어할 수 있습니다.

---

어떤 태그의 각 면의 마진을 한 줄로 표현할 수가 있는데, 4가지 값을 갖는 경우에는, 앞에서부터 위, 오른, 아래, 왼쪽 순으로 마진 값을 갖습니다. 

아래와 같이 갯수에 따라 가리키는 면이 다릅니다.

<style>
p.myMargin4 {margin: 100px 70px 40px 10px;}
	/*위, 오른, 아래, 왼쪽*/
p.myMargin3 {margin: 100px 70px 40px;}
	/*위, (오른 및 왼쪽), 아래*/
p.myMargin2 {margin: 100px 70px;}
	/*(위 및 아래), (오른 및 왼쪽)*/
p.myMargin1 {margin: 100px;}
	/*모든 면의 마진*/
 </style>

---

CSS 패딩 프로퍼티 (padding property) 는 마진과 달리, 태그의 테두리 속에 (즉, 태그의 내용과 테두리 사이에) 흰 색의 공간을 추가합니다.

그런데 마진 (margin) 과 달리 패딩 (padding) 은 태그의 배경 색상 (background colour) 에 영향을 받습니다.

CSS 로 태그의 각 면 (위, 오른, 아래, 왼쪽) 의 패딩 (padding) 을 완전히 제어할 수 있습니다.

---

한 줄로 태그의 각 면의 패딩을 표현할 수가 있는데, 4가지 값을 갖는 경우, 앞에서부터 위, 오른, 아래, 왼쪽 순으로 마진 값을 갖습니다. 

아래와 같이 갯수에 따라 매칭되는 면이 다릅니다.

<style>
p.myPadding4 {padding: 10px 40px 70px 100px;}
	/*위, 오른, 아래, 왼쪽*/
p.myPadding3 {padding: 40px 70px 100px;}
	/*위, (오른 및 왼쪽), 아래*/
p.myPadding2 {padding: 70px 100px;}
	/*(위 및 아래), (오른 및 왼쪽)*/
p.myPadding1 {padding: 100px;}
	/*모든 면의 마진*/
</style>

---

<style>
p.myBorderRed {border: 5px dotted red; background-color: LightGreen;}
p.myBorderGreen {border: 5px dotted green; background-color: LightGoldenRodYellow;}

p.myMargin4 {margin: 10px 20px 30px 40px;}
/*위, 오른, 아래, 왼쪽*/
p.myMargin3 {margin: 40px 30px 10px;}
/*위, (오른 및 왼쪽), 아래*/
p.myMargin2 {margin: 10px 20px;}
/*(위 및 아래), (오른 및 왼쪽)*/
p.myMargin1 {margin: 10px;}
/*모든 면의 마진*/

p.myPadding4 {padding: 10px 20px 30px 40px;}
/*위, 오른, 아래, 왼쪽*/
p.myPadding3 {padding: 10px 20px 30px;}
/*위, (오른 및 왼쪽), 아래*/
p.myPadding2 {padding: 10px 20px;}
/*(위 및 아래), (오른 및 왼쪽)*/
p.myPadding1 {padding: 10px;}
/*모든 면의 마진*/
</style>

<p class="myBorderRed myMargin3 myPadding2">
margin: 40px 30px 10px; 위, (오른 및 왼쪽), 아래 순으로 마진 값이 적용됩니다.<br />
padding: 10px 20px; (위 및 아래) 와 (오른 및 왼쪽) 순으로 패딩 값이 적용됩니다.</p>
<p class="myBorderGreen myMargin4 myPadding1">
margin: 10px 20px 30px 40px; 위, 오른, 아래, 왼쪽 순으로 마진 값이 적용됩니다.<br />
padding: 10px; 모든 면의 패팅 값을 적용합니다.</p>

---

margin: 40px 30px 10px; 위, (오른 및 왼쪽), 아래 순으로 마진 값이 적용됩니다.
padding: 10px 20px; (위 및 아래) 와 (오른 및 왼쪽) 순으로 패딩 값이 적용됩니다.

margin: 10px 20px 30px 40px; 위, 오른, 아래, 왼쪽 순으로 마진 값이 적용됩니다.
padding: 10px; 모든 면의 패팅 값을 적용합니다.

[광고] Udemy 동영상 강의로 보기