CSS Box Model 이해하기

Box Mdoel 이해하기

Content

가로 width 세로 height

Padding

안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 padding

Border

테두리를 타나태는 border

Margin

바깥 여백, 즉 요소와 요소 사이의 간격을 나타내는 margin

Box Sizing

box-sizing: border-box/content-box(default)

Box

Block

• 따로 width를 선언하지 않은 경우, width=부모의 content-box의 100%
• 따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채움
• margin: 0 auto;
• 따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합=부모의height

Inline

• width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용 불가

InlineBlock

• Block, Inline 속성을 가지고 있습니다.