CSS 박스 모델 padding border 개념

CSS 박스 모델 기본 개념

CSS를 공부할 때 가장 기초가 되는 개념이 박스 모델입니다. 

content, padding, border, margin 개념이 갑자기 쏟아져 나옵니다! 배울 때는 분명 '아하 그렇지' 알겠는데, 막상 사용하려고 하면 '언제 padding을 쓰고 언제 border를 쓰는 거지?' 헷갈립니다. 시간이 지나면 뭐가 내용에 가까운 거였고, 뭐가 border 밖이었지? 잊기도 합니다. 

아래 그림을 보면 더 이상 헷갈리지 않을 거예요!

1. 사람: content입니다. 사람은 중요하니까요. 가장 중심에 있습니다.

2. padding: 사람이 패딩 외투를 입고 있습니다. content를 감싸고 있어요.

3. border: 울타리입니다. 울타리는 경계를 의미하죠!

4. margin: 울타리 너머에는 바깥세상과의 거리를 의미하는 margin이 있습니다. 

padding, border, margin

참고로 이 이미지는 bing 이미지 AI로 만들었습니다 ^^

 

<네이버 사전에서 찾은 영어 단어 뜻>

content: 명사: 내용물

padding: 명사, 충전재

border: 명사, 가장자리, 경계

margin: 명사, 여백, 차이

content, padding border, margin