8. Margin과 Padding

1. Margin과 Padding

 

모든 요소는 아래와 같이 margin, border, padding의 스타일을 갖고 있습니다.

위의 그림을 해석해보자면,

주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽에 모두 5px

노란색은 border 영역, 보더의 두께는 5px이다.

초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽에 모두 20px

요소의 가로는 820px, 세로는48px

 

border는 다음 시간에 배우겠지만,

요소에 border 스타일을 주면 테두리가 그려집니다.

padding은 border 내에 생기는 영역입니다.

그리고 위의 그림에서 820px이라는 가로 값은 padding영역이 합쳐진 가로 길이입니다.

 

margin은 border 외부에 생기는 여백입니다.

두 번째 사진처럼 margin까지(주황색) 합쳐진 가로길이는 총 373px입니다.

820 + 5(왼쪽margin) + 5(오른margin) = 830px

 

순수 내용(파란색영역)은 padding과 border를 제외한 길이인데 계산해보면 770px입니다.

820 - 20(왼쪽패딩) - 20(오른쪽패딩) - 5(왼쪽테두리) - 5(오른쪽테두리) = 770입니다.

 

css는 아래와 같습니다.

p.example {
  width: 820px;
  height: 48px;
  margin: 5px;
  border: 5px solid black;
  padding: 20px;
}

padding을 20px을 주니 사방이 20px의 영역이 생겼습니다 

 

2가지로 풀어 쓸수 있는데

1번
p.example {
  padding: 20px 20px 20px 20px;
}

2번
p.example {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

margin도 똑같이 할 수 있습니다.