[ CSS ] css margin, padding 축약형

padding과 margin 축약형

 

1. 상,하,좌,우가 전부 10px이라면?

.클래스{
padding: 10px;
}

 

2. 만약 상하( top / bottom ) 이 20px이고, 좌우 ( left / right ) 가 10px 이라면?

.클래스{
padding : 20px 10px;
}

 

3. 상(top) 하(bottom) 좌(left) 우(right) 가 다 각자 다르다면?

.클래스{
padding-top : 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

저 위 코드를

.클래스{
padding: 10px 20px 30px 40px;
}

로 축약 가능

4가지를 축약형으로 사용할 때엔, 상,우,하,좌를 생각하면 될 것 같다.