박스모델

 

.box{margin:10px} top right bottom left
.box{margin:10px 20px} top bottom | right left
.box{margin:10px 20px 30px} top | right left | bottom
.box{margin:10px 20px 30px 40px} top | right | bottom | left  top 부터 시작해서 시계방향으로 적용됨.

방향을 구체적으로 지정..
.box{
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px
    margin-left:40px
}

border의 경우 다양한 방법
.box{
    border:5px solid red;
    border-top:5px solid red;
    border-style:dashed; solid | dashed | dotted;
    border-width:2px;
    border-color:red;
    border-right-color:orange;
}

박스모델의 width 또는 height 설정 시, padding과 border를 삽입하면 width나 height값이 익스플로러5.5 이하에서 다르게 보이는 점을 해결하는 방법.

width나 height를 적용할때 padding이나 border는 쓰지 않는다. 만일 쓸 수 밖에 없는 상황이면 핵(hack)을 적용한다.

 

단순박스모델 핵(SBMH)

.box{

   width: 500px;

   w\idth: 400px; /* 모던브라우저 적용 */

   \width: 480px; /* win ie5에 적용 */

}

Tantek 박스모델 핵

.box{

   border: 5px solid red;

   padding: 20px;

   width: 200px;

   voice-family: "\"}\"";

   voice-family: inherit;

   width: 150px;

}