ToolBoxy
무료가입
🎨

CSS Box Model Visualizer

css · box-model · layout

전체:

위

오른쪽

아래

왼쪽

전체:

위

오른쪽

아래

왼쪽

전체:

위

오른쪽

아래

왼쪽

margin
content
전체 너비: 284px
전체 높이: 120px
콘텐츠 너비: 200px
콘텐츠 높이: 60px
.element {
  width: 200px;
  height: 60px;
  box-sizing: content-box;
  margin: 16px 24px 16px 24px;
  border: 2px solid #6366f1;
  padding: 12px 16px 12px 16px;
}

사용 방법

  1. 1

    너비·높이·box-sizing을 설정하세요.

  2. 2

    마진·테두리·패딩을 조절하세요.

  3. 3

    생성된 CSS를 복사하세요.

FAQ

이 도구는 무료인가요?

네, 가입 없이, 설치 할 필요도 없이 완전 무료로 바로 사용할 수 있습니다.

이 도구는 어떤 도구인가요?

CSS 박스 모델(마진, 보더, 패딩, 콘텐츠)을 시각화하고 구성합니다. content-box와 border-box를 지원합니다. 회원가입이나 설치 없이, 페이지만 열면 바로 무료로 사용할 수 있어요.