[CSS 기초] 박스모델 Box Model (margin, padding, border)

css에서 모든 것은 box model로 이루어져있으며 이 box model을 이해해야 CSS로 레이아웃을 구성할 수 있습니다.

 

box model은 margin(외부 여백), border(테두리), padding(내부 여백), content로 구성됩니다.

 

 

box-sizing: border-box를 입력해줘야 하는 이유

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

box-sizing: border-box를 설정하지 않은 박스모델은 지정한 너비와 높이는 요소의 Content 크기에만 적용되므로 

요소에 Border나 Padding이 있을 경우 지정한 높이나 너비에서 이것들을 더하여 계산합니다.

 

예시를 한 번 들어볼게요.

 

 div{     
    width: 300px;
    height: 200px;
    border: 10px solid rgb(187, 61, 86);
    padding: 20px;
    margin: 50px;
    background-color: cornsilk;
    text-align: center;
    line-height: 200px;
 }

 

해당 CSS 코드로 div 태그를 꾸며 줬을 때, 너비 300px과 높이 200px을 지정해주었으나 

 

총 너비 360px, 높이 260px의 박스가 만들어졌습니다. 위에서 말한대로 Border와 Padding 값이 포함된 것인데요.

 

Border와 Padding 값은 상하좌우에 모두 들어가기 때문에

 

너비는 지정한 너비 300px + Border-left 10px + Border-right 10px + Padding-left 20px + Padding-right 20px = 총 360px이 됩니다.

 

높이는 지정한 높이 200px + Border-top 10px + Border-bottom 10px + Padding-top 20px + Padding-bottom 20px = 총 260px이 됩니다.

 

 

 

 

 

 

 

 

box-sizing: border-box를 설정해준다면

너비가 지정한대로 300px과 200px로 설정된 것을 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

Magin, Padding 속성 크기 지정법

• 하나의 크기 값을 지정하는 경우

margin / padding : 10px

 > top, bottom, right, left 상하좌우가 모두 적용됩니다.

 

• 두 개의 크기 값을 지정하는 경우

margin / padding: 10px 20px

 > top, bottom / right, left 적용.

 > 첫번째 자리는 상하, 두번째 자리는 좌우 적용.

 

• 세 개의 크기 값을 지정하는 경우

margin / padding: 10px 20px 30px;

 > top / right, left / bottom 적용.

 > 첫번째 자리 상, 두번째 자리 좌우, 세번째 자리 하

 

• 네 개의 크기 값을 지정하는 경우

margin / padding: 10px 20px 30px 40px;

 > top / right / bottom / left 적용.

 > 첫번째 자리 상, 두번째 자리 우, 세번째 자리 하, 네번째 자리 좌