CSS 박스 속성

1. border (테두리)

p {
border: 1px solid red; /// 테두리 두께, 테두리 스타일, 테두리 색상
}

2. margin (바깥 여백)

p {
 margin: 10px 20px 30px 40px; /// 각각의 값은 top, right, bottom, left (시계방향)
 }
 
 p {
 margin: 10px 20px; /// 각각의 값은 top/bottom, left/right
 }
 
 p {
 margin: 10px /// 모든 방향의 바깥 여백
 }

바깥 여백에는 음수 값을 지정할 수 있다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다.
극단적으로 적용시, 화면에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수 있다.

3. Padding (안쪽 여백)

마진과 동일

4. 박스를 벗어나는 컨텐츠 처리

overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성한다.

p {
  height: 40px;
  overflow: auto;
}

5. 박스 크기 측정 기준

#box1 {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

위 박스의 크기를 측정해보면 box1의 width 속성에 300px을 지정했다. 그러나 개발자 도구로 확인하면 해당 요소의 값은 324px인데 그 이유는 이렇다

300px (컨텐츠 영역)
+10px (padding-left)
+10px (padding-right)
+2px (border-left)
+2px (border-right)

이처럼 레이아웃 디자인 시 많이 하는 실수가 박스에 적용할 여백을 고려하지 않는 경우인데, 여백과 테두리 두께를 포함해서 박스 크기를 게산하게 만드는 방법이 있다. *은 모든 요소를 선택하는 셀렉터인데 이를 선택하여 box-sizing 속성을 추가하고 border-box라는 값을 추가하면 된다.

* {
  box-sizing: border-box;
}

conten-box는 박스의 크기를 측정하는 기본값이지만, 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스크기 계산법인 border-box를 권장한다.