CSS Box Model

• HTML 요소를 감싸는 상자입니다.
• 웹페이지는 이런 수많은 상자가 모여 있는 것이라 할 수 있죠.
• 요소, 패딩, 테두리, 마진으로 구성되어 있습니다
  • 요소: 텍스트, 사진 등 보여줄 대상입니다.
  • 패딩: 요소 주변 영역을 감쌉니다.
  • 테두리: 요소와 패딩을 감싸는 테두리입니다
  • 마진: 테두리 밖의 영역을 감쌉니다.

• CSS box model은 블록박스에 적용됩니다. 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다.

  inline 요소는 width, height, 상하 margin 값이 적용되지 않습니다

width

• 요소의 너비를 설정합니다.
• 기본값은 콘텐츠 영역의 너비이지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정합니다.
• auto: 기본값. 브라우저가 계산하여 지정(요소의 부모 크기 기준으로 가득 채우기)

height

• 요소의 높이를 설정합니다.
• auto: 기본값. 브라우저가 계산하여 지정(요소의 자식 기준으로 조절)

padding

• 단축 속성입니다
• padding-top padding-right padding-bottom padding-left 순으로 작성합니다.

p{
	padding: 10px; /* top, right, bottom, left 모두 10px */
	padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
	padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
	padding: 10px 20px 30px 40px;
}

margin