[CSS] 블록요소의 CSS 패딩과 마진, (블록의 여백/Padding, Margin)

 

패딩이란

padding 속성은 박스모델의 콘텐츠 주위 공간(여백)을 생성하는데 사용된다.

 

<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>

이 명령어를 입력하게 되면

 

아래와 같이 상하좌우에 70px간격으로 여백(공간)이 생성된다.

 

CSS를 이용하여 네 방향 값을 제어할 수 있다.

 

     속성

• padding-top
• padding-right
• padding-bottom
• padding-left

<style>
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>

이렇게 값을 입력하면

위 예제와 같이 여백이 생성되어 출력된다.

---

축약표현

4개의 padding 프로퍼티를 합쳐서 축약표현으로 사용할 수 있다.

 

 

축약표현1

<style>
div {
  padding: 25px 50px 75px 100px;
}
</style>

 

padding: 25px 50px 75px 100px;

순서대로

 

• 상단 패딩 : 25px
• 우단 패딩 : 50px
• 하단 패딩 : 75px
• 좌단 패딩 : 100px

라는 뜻을 가지고 있다.

 

---

축약표현2

<style>
div {
  padding: 25px 50px 75px;
}
</style>

padding: 25px 50px 75px;

순서대로

 

• 상단 패딩 : 25px
• 좌우단 패딩 : 50px
• 하단 패딩 : 75px

축약표현에서 패딩 값을 3개를 주면 가운데 값에 대칭으로 여백을 출력하라는 명령어가 된다.

 

---

축약표현3

<style>
div {
  padding: 25px 50px;
}
</style>

padding: 25px 50px;

순서대로

 

• 상하단 패딩 : 25px
• 좌우단 패딩 : 50px

첫번째 값은 상하단을 25px로 대칭을, 두번째 값은 50px로 대칭으로 여백을 출력하라는 명령어가 된다.

 

 

---

Margin

Padding이 영역 안쪽의 여백을 주는거였다면

Margin은 영역 바깥쪽의 여백을 주는 것이다.

 

 

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

이와 같은 속성을 준 블록을 만들어보자.

 

 

 

이 블록의 여백은 이 살구색 영역만큼 차지하게 된다.

Margin은 Padding과 모든 명령어가 동일하여 사용방법이 같다.

 

 

가로길이가 고정되어 있을때 margin:0 auto; 명령어를 통해 좌우정렬 할 수 있음

0은 상하길이 여백을 남기지 말라는 뜻이고 auto는 가운데로 배치하라는 뜻