Margin & Padding

실질적인 박스가 차지하는 너비 : 요소의 너비 + padding+ border가 합쳐진 만큼
273 + 50(왼쪽 padding) + 50(오른쪽 padding) + 5(왼쪽 border) + 5(오른쪽 border) = 383

margin까지(주황색) 합쳐진 너비는 총 483px
273 + 50(왼쪽 padding) + 50(옹른쪽 padding) + 5(왼쪽 border) + 5(오른쪽 border) + 50(왼쪽margin) + 50(오른margin) = 483

• margin : 테두리 바깥 여백

  • maring 작성법

  p.example {
    margin: 50px;
  }
  
  p.example {
    margin: 50px 50px 50px 50px;
  }
  순서대로 위, 오른쪽, 아래, 왼쪽의 여백 값
  
  p.example {
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    margin-left: 50px;
  }

• padding : 테두리 안 쪽의 초록색 영역
  작성법은 margin과 동일