[CSS 기초] 마진 vs 패딩 차이, 박스 모델 완벽 이해하기

CSS에서 요소의 여백과 레이아웃을 조정하는 가장 기본이자 중요한 개념인 margin, padding, 그리고 박스 모델(Box Model)에 대해 정리해보았습니다.

 

1. 마진(Margin)이란?

마진은 HTML 요소의 바깥쪽 여백을 설정하는 속성입니다.
요소와 요소 사이의 간격을 조절할 때 사용하며, 외부 여백이라고도 부릅니다.

 

1) 주요 특징

• 인접한 다른 요소와의 거리를 조절합니다.
• 음수 값도 허용되며, 이를 이용해 요소를 겹치게 할 수도 있습니다.
• 단위는 px, %, em 등이 사용됩니다.

.margin-example {
  margin: 10px; /* 모든 방향 */
  margin-left: 20px; /* 왼쪽만 */
  margin: 10px 20px; /* 위아래 10px, 좌우 20px */
}

 

#CSS마진 #Margin정의 #요소간격조절
요소 간의 바깥 간격을 설정하여 배치 간격을 유연하게 조절합니다.

 

2. 패딩(Padding)이란?

패딩은 HTML 요소의 내부 여백을 설정하는 속성입니다.
콘텐츠와 테두리(Border) 사이의 간격을 의미합니다.

 

1) 주요 특징

• 요소 내부의 내용과 테두리 사이의 공간입니다.
• 패딩에도 배경색이 적용됩니다.
• 일반적으로 음수 값은 사용하지 않습니다.

.padding-example {
  padding: 10px; /* 모든 방향 */
  padding-top: 20px; /* 위쪽만 */
  padding: 10px 20px; /* 위아래 10px, 좌우 20px */
}

 

#CSS패딩 #Padding정의 #내부여백조절
콘텐츠와 테두리 사이의 공간을 설정해 가독성과 디자인을 향상시킵니다.

 

3. 마진과 패딩의 차이

항목	마진 (Margin)	패딩 (Padding)
위치	요소 외부 공간	요소 내부 공간
용도	요소 간 간격 조정	콘텐츠와 테두리 간 간격 조정
음수 값	허용됨	허용되지 않음
배경색 적용	불가	가능

 

#마진패딩차이 #MarginPadding비교

 

4. CSS 박스 모델(Box Model)

모든 HTML 요소는 보이지 않지만 박스 형태로 존재합니다.
이 박스를 구성하는 네 가지 요소가 CSS 박스 모델입니다.

 

1) 박스 모델의 구성

1. Content – 텍스트나 이미지 등 실질적인 콘텐츠
2. Padding – 콘텐츠와 테두리 사이의 공간
3. Border – 패딩을 감싸는 테두리
4. Margin – 요소와 다른 요소 사이의 공간

박스모델 구성

 

#CSS박스모델 #BoxModel정의 #웹디자인기초
HTML 요소의 레이아웃 계산과 구성 원리를 이해하는 기본 개념입니다.

 

5. 블록 / 인라인 / 인라인-블록 요소 비교

구분	블록(Block)	인라인(Inline)	인라인-블록(Inline-Block)
줄바꿈	O	X	X
너비/높이 설정	가능	불가능	가능
마진/패딩	전체 적용	좌우만 일부 적용	전체 적용 가능
예시 태그	<div>, <p>, <ul>	<span>, <a>, <img>	CSS에서 지정해야 함

 

#블록요소 #인라인요소 #CSS디스플레이속성

 

6. 박스 스타일 속성

1) 테두리(border)

border: 2px solid black;
border-radius: 10px; /* 모서리 둥글게 */

 

2) 테두리 스타일 종류

• solid: 실선
• dotted: 점선
• dashed: 짧은 직선
• double: 이중선 등

3) 개별 속성 지정 예시

border-top-style: dotted;
border-bottom-style: dashed;
border-width: 3px;
border-color: crimson;

 

#CSS테두리 #박스디자인 #border-radius