CSS: padding, margin, box-sizing

 

 

padding : 안쪽에 생기는 여백

margin : 바깥쪽에 생기는 여백

 

 

작성할 때는 아래와 같이 작성할 수 있다.

 

.box {
    padding: 0 20px 5px 4px; /* 위 오 아 왼 */
    padding-right: 30px;
    margin: 5px 20px; /* 상하 좌우 */
    margin-top: 20px;
}

 

 

---

 

 

css에서는 box-sizing: border-box 라는 중요한 속성이 있다.

width, height를 잡고나서, padding을 주게 되면 기본적으로 (width+padding) 을 해서 총 width가 늘어나게 된다.

이때 box-sizing: border-box를 주게 되면, width를 유지하면서 안쪽에서 padding을 잡게 된다.

 

이것과 마찬가지로 페이지를 만들때 간혹 총 width가 넓어져버리는 경우가 있는데,

그때는 box-sizing을 이용해서 컨텐츠들을 안쪽에 들어오게 하면된다.