[CSS] Padding, Border, Margin 차이가 뭐임?

HTML 요소는 박스 모델에서 다음과 같은 영역으로 구성이 된다.

• Content : 실제 내용들이 들어가는 영역
• Padding : Content와 Border 사이의 내부 여백. 배경색 설정시 해당 영역까지 칠해진다.
• Border : Padding과 Margin 사이에 적용되는 여백
• Margin 외부 여백으로 다른요소와의 간격을 주기위해 주로 사용된다.

컨테이너 박스를 하나를 만들고 그 안에 두개의 박스를 넣어 차이가 무엇인지 분명하게 알아보자.

먼저 코드를 보지 않고 영역을 추측하면서 배워보자.

가장 안쪽 영역에서 Content에는 P태그가 두개 들어간 것 같다. Content의 왼쪽,위쪽,오른쪽 여백이 있는것으로 보아 Padding이 설정 되고 있음을 추측할 수 있다.
Padding 영역은 배경색 설정시 해당되는 영역이기 때문이다.

Padding 영역 다음으로 생각해볼 수 있는것은 Border 영역이다. Margin 영역에는 Color를 적용할 수 없으므로 Border 영역임을 추측할 수 있다.

그 다음으로 Margin 영역이 첫번째 큰 박스와 두번째 큰 박스 사이에 빈 공간이 있음을 보아 Margin 역시 적용되고 있음을 볼 수 있다.

• 참고 코드

      {/* 컨테이너 박스 */}
<div style={{display:"flex"}}>

      {/* 왼쪽 박스 */}
      <div style={{width:"400px",height:"400px",backgroundColor :"black", padding:"20px", border:"100px solid pink",marginRight:"20px"}}>
          <p style={{color:"white"}}>Black 영역은 컨텐츠 영역부터 ~ Padding 영역</p>
          <p style={{color:"white"}}>Pink 영역은 Boreder 영역</p>
      </div>

      {/* 오른쪽 박스 */}
      <div style={{width:"400px",height:"400px",backgroundColor :"black", padding:"20px", border:"100px solid pink",marginLeft:"20px"}}>
          <p style={{color:"white"}}>Black 영역은 컨텐츠 영역부터 ~ Padding 영역</p>
          <p style={{color:"white"}}>Pink 영역은 Boreder 영역</p>
      </div>
      
    </div>