CSS box model

CSS Box model

Box model

• 모든 html 요소는 box 형태로 되어 있음
• 하나의 박스는 네 부분(영역)으로 나뉨
  • content
  • padding
  • border
  • margin

Box model 구성

• Margin
  • 테두리 바깥의 외부 여백으로, 배경색을 지정할 수 없음
• Border
  • 테두리 영역에 해당
• Content
  • 글이나 이미지 등 요소의 실제 내용
• Padding
  • 테두리 안쪽의 내부 여백
  • 요소에 적용된 배경색, 이미지는 패딩까지 적용됨
  • content를 감싸고 있는 부분

shorthand

• shorthand를 통해 여러 속성에 대한 값을 한 줄로 줄 수 있다.

/*margin*/
.box1 {
    margin: 10px; # 일괄적으로 10px
}

.box2 {
    margin: 10px 20px; #상하 10px, 좌우 20px
}

.box3 {
    margin: 10px 20px 30px; #상 10px , 좌우 20px, 하 30px
}

.rectangle{
    border-width: 2px;
    border-style: dashed;
    border-color: black;
}

# 위 코드와 같다.
.rectangle{
    border: 2px dashed black;
}

box size

• 기본적으로 모든 요소의 box-sizing 속성 값은 content-box
  • 이 경우, 지정한 넓이가 곧 순수 contents 영역의 넓이가 됨 (Padding의 넓이는 따로)

.box {
        (box-sizing의 default는 content-box)
        width: 100px;
        margin: 10x auto;
        padding: 20px;
        border: 1px solid black;
        text-align: center;
        background-color: darkgreen;
      }

=> 박스의 넓이 = 양쪽 패딩과 border까지 합해서 총 142

• 만약, border까지 넓이를 함께 설정하고자 한다면?
  • box-sizing 속성 값을 dorder-box 로 설정해야!

.box {
        box-sizing: border-box;
        width: 100px;
        margin: 10x auto;
        padding: 20px;
        border: 1px solid black;
        text-align: center;
        background-color: darkgreen;
      }

=> 박스의 넓이는 지정한 100px으로! (이 때 content의 width는 자동 설정)

마진 상쇄 (Margin collapsing)

• 특정 block A와 B의 bottom, top margin 이 겹쳤을 때 둘 중에서 큰 margin 값으로 결합되는 것을 의미