css에서 많이 쓰이는 padding, margin 두 개 차이점 정리

보통 강의에서나 공식문서상에서는


이라 설명하는데

안쪽 여백, 바깥 여백이란 말 자체는 이해된다해도
실제 코드를 짤 때면 상황마다 어떻게 써야하는지 헷갈리더라구요

제 느낌대로 쉽게 설명하자면

Padding

은 부모요소와 자식요소 사이 간격, 주로 테두리와 요소 사이 간격 조절

Margin

은 형제사이끼리의 요소 사이 간격, 주로 요소끼리 띄우는 용도
입니다

간단한 예제로 설명하면

<div class="card">
	<div class="title">여긴 제목</div>
	<div class="content">여긴 내용</div>
    <button type="submit" class="submitBtn">입력 완료</button>
</div>

위 코드를 참고하여 제목과 내용을 100px 띄우기위해 제목 클래스에 필요한 css 속성을 고른다면

margin-bottom: 100px;
padding-bottom: 100px;
margin-top: 100px;
둘 다 필요없음

margin-bottom: 100px;이 정답입니다.