CSS 박스 모델

박스 모델

• margin
  마진 상쇄(margin collapsing)
  세로에 있는 마진이 서로 겹친다면 더 큰값으로 적용된다.
  세로 마진이 원하는 값으로 안나온다면 마진 상쇄를 생각해봐야 한다.
  border가 설정되어 있는 경우 경계가 있다고 보고 마진 상쇄가 일어나지 않는다.
  가로 마진은 겹치지 않기 때문에 가로로 나열되어 있는 것들에게 일정하게 마진을 주려면 maring-left, margin-right와 함께 :first-child나 :last-child를 활용하면 좋다

• border
  ex)
  border: 1px solid #dedede;
  border-radius: 8px; (모서리 둥글게 만드는 것)
  border-radius: 50%; (타원 모양)
  border-radius: 9999px; (알약 모양)

• padding

• content

box-sizing

• box-sizing: border-box;
  (border를 기준으로 넓이 지정)
  *{
  box-sizing: border-box;
  (이걸 쓰고 시작하는 것이 편하다)
  }

overflow

• overflow: hidden;

• overflow: scroll;

• overflow: auto; (넘치면 스크롤하게 만들기)

• white-space: nowrap;(가로 스크롤)