margin과 padding의 차이

margin은 바깥 여백을 padding은 안쪽 여백을 조정할 수 있습니다.


다음의 예를 보겠습니다.

다음과 같이 코딩하였습니다.

<div style="background: yellow;">
<p>margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교
margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

여기에 padding 값을 줍니다.

<div style="background: yellow;padding:30px;">
<p>margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교
margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

안쪽으로 여백이 생겼습니다.
이번에는 margin입니다.

우선 다음과 같이 코딩합니다.

<div style="background: yellow;padding:30px;">
<p style="background:blue;">margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교

margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

첫번째 <p>태그에 margin 값을 줍니다.

<div style="background: yellow;padding:30px;">
<p style="background:blue;margin:20px;">margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교

margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

첫번째 p태그 주변으로 여백이 생깁니다.