[CSS] Box model 속성

● Box model ●

1. margin 

  : 요소 외부의 여백

margin-top: <크기>;
margin-right: <크기>;
margin-bottom: <크기>;
margin-left: <크기>;

 

2. border

  : 요소 테두리 (경계선)

boder-top: <크기>;
boder-right: <크기>;
bordef-bottom: <크기>;
border-left: <크기>;

border: <border-width> <border-style> <color>;
border-width: <크기>;
border-style: <속성값>;
/* none, hidden, solid, double, dotted, dashed, groove, fidge, inset, outset */

 

3. padding

  : 요소 내부의 여백

padding-top: <크기>;
padding-right: <크기>;
padding-bottom: <크기>;
padding-left: <크기>;

 

4. content

:  요소의 내용

width: <크기>;
height: <크기>;

 

5. box-sizing

  : (content-box (content영역으로 제한(, border-box(border영역으로 제한))

width:100px;
height:100px;
padding:10px;
border:1px solid black;
margin:10px;