[CSS] Box Model (박스 모델)

CSS 박스 모델

모든 HTML 요소는 박스 모양으로 구성되고 네 영역으로 이루어진다.

 

 

---

박스 모델은 Chrome 기준 F12를 누르면 Element Style 부분에서 바로 만나볼 수 있다.

 

네 가지 영역

1. 내용
2. 패딩
3. 테두리
4. 마진

 

1️⃣ 내용

텍스트나 이미지 등의 내용이 표시되는 영역이다.

폭과 높이로 크기를 지정할 수 있다.

width:111px;
height:111px;

 

2️⃣ 패딩

콘텐츠 내용과 테두리 사이의 여백 영역이다.

패딩은 눈에 보이지 않고, 마이너스 값의 지정도 가능하다.

padding: 11px 11px 11px 11px;
padding-top:11px;
padding-bottom:11px;

 

3️⃣ 테두리

패딩과 마진의 경계에 있는 테두리이다.

테두리의 두께와 색상 등의 설정이 가능하다.

border:1px;

 

4️⃣ 마진

테두리와 다른 요소 사이의 여백 영역이다.

마진은 눈에 보이지 않는다.

margin: 11px;

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!