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]