CSS padding, margin, box-sizing

padding과 margin은 간격 사이의 영역을 정의하는데 기준점이 다릅니다.

 

 

예를 들어, 우리가 레스토랑에 가서 음식 2개를 시켜서 테이블에 놓았다고 합니다.

 

padding은 접시의 테두리(border)에서 음식(content)까지의 사이의 영역이며,

 

margin은 접시(element)와 접시(element) 사이의 영역으로 이해하시면 됩니다.

 

 

 

---

 

 

padding

padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.

 

이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.

 

CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다.

 

 

padding 속성

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

 

padding은 border(테두리)와 content의 간격 사이의 영역이므로,

 

border를 생성하고, 각 padding 속성에 값을 입력하였습니다.

 

 

padding 방향

패딩은 위와 같이 top, right, bottom, left를 따로 입력하여도 되지만,

한 줄로 축약하여 입력하기도 합니다.

 

• padding: 10px 같은 표현은 상하좌우 모두 10px을 의미합니다
• padding: 30px 10px은 top, bottom 30px / right, left 10px을 의미합니다.
• padding: 50px 10px 50px은 top 50px / right, left 10px / bottom 50px을 의미합니다.
• padding: 10px 20px 30px 40px은 top 10px, right 20px, bottom 30px, left 40px을 의미합니다.

padding의 방향 순서는 top을 기준으로 시계방향 순서입니다.

 

 

 

---

 

margin

margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.

 

이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다.

 

CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다.

 

 

margin 속성

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

 

 

margin은 요소와 다른 요소의 간격 사이의 영역입니다.

 

 

주황색 부분은 각각의 margin 값이 적용된 모습입니다.

 

 

margin 방향

마진은 위와 같이 top, right, bottom, left를 따로 입력하여도 되지만,

한 줄로 축약하여 입력하기도 합니다.

 

• margin: 10px 같은 표현은 상하좌우 모두 10px을 의미합니다
• margin: 30px 10px은 top, bottom 30px / right, left 10px을 의미합니다.
• margin: 50px 10px 50px은 top 50px / right,left 10px / bottom 50px을 의미합니다.
• margin: 10px 20px 30px 40px은 top 10px, right 20px, bottom 30px, left 40px을 의미합니다.

margin의 방향 순서는 top을 기준으로 시계방향 순서입니다.

 

 

 

margin auto

margin: auto;

 

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정합니다.

 

즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 됩니다.

 

그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 됩니다.