CSS Box Model

 

✔ CSS Box Model

• Content : 텍스트, 이미지가 표시되는 상자내용
• Padding : 콘텐츠 주변 영역
• Border : 패팅과 콘텐츠를 둘러싸는 테두리
• Margin : 테두리 외부 영역 

 

✔ Width and Height of an Element

• 전체 요소 너비 = 너비 + 왼쪽-오른쪽 패딩 + 왼쪽-오른쪽 테두리
• 전체 요소 너비 = 높이 + 상단-하단 패 + 상단-하단 테두리

 

• 즉, margin 값은 실제 요소 너비에 포함되지 않는다.