CSS Box Model

zzZ·2022년 7월 11일

CSS Box Model?

CSS box model은 block box에 적용된다 인라인 박스(인라인요소)는 박스 모델에 정의된 일부 동작만 사용한다

Box 구성

  • 콘텐츠 박스
    width 와 height같은 속성

  • padding 박스
    콘텐츠 주변을 마치 공백처럼 자리잡는다

  • 테두리 박스
    테두리 박스는 콘텐츠와 padding까지 둘러싼다
    border와 관련속성을 사용하여 제어할 수 있다

  • 여백 박스
    Margin은 가장 바깥 쪽 레이어로 모두를 둘러싸고 box와 다른 요소 사이의 공백역할을 한다

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

box model예시

0개의 댓글