The Box Model

 

 

그림에 border가 빠져있네요..

.box {

  margin: 30px;

  padding: 30px;

  border: 1px solid #000;

  width: 400px;

  height: 200px;

}

 

체크하는 방법은 구글 디벨러퍼 버전에서..

 

 

Margins

 

margin: top right bottom left  시계 방향으로 기억

 

margin: top_bottom right_left  2개의 값일 때..

 

margin: top right_left bottom  3개의 값일 때

 

margin: all  1개의 값일 때.

 

값이 auto 일때.. 양쪽 값이 자동으로 들어감.  보통 센터가 됨.

 

 

Padding

 

padding: 마진과 같은 동작

 

 

Padding & Margin Long-hand

 

margin-top, margin-left, margin-right, margin-bottom

padding-top, padding-left, padding-right, padding-bottom

 

 

Borders

 

border-top-width:

border-top-style: dashed, dotted, double, groove, inset, outset, ridge, solid

border-top-color:

 

border: [width] [style] [color]