예를 들어 게시글 본문 제일 끝에서 40px 하단에 추천 버튼을 배치 시키고 싶을 때
추천 버튼에게 padding-top:40px 를 주는것과 margin-top:40px 를 주는것 중에 어느 것이 맞는 건가요
둘 다 겉으로 보이는 모습은 동일한 거 같은데 뭔가 일반적으로 사용하는 법칙(?) 같은게 있는 건가요?
PHP | PHP 7.2 |
---|---|
CMS | Rhymix 2.0 |
예를 들어 게시글 본문 제일 끝에서 40px 하단에 추천 버튼을 배치 시키고 싶을 때
추천 버튼에게 padding-top:40px 를 주는것과 margin-top:40px 를 주는것 중에 어느 것이 맞는 건가요
둘 다 겉으로 보이는 모습은 동일한 거 같은데 뭔가 일반적으로 사용하는 법칙(?) 같은게 있는 건가요?
padding은 그 태그가 차지하는 공간에 포함되고, margin은 옆 태그와 사회적 거리두기 하는 것입니다.
배경색을 지정하면 padding 부분은 색이 칠해지고, margin 부분은 칠해지지 않지요.
마찬가지로, 링크의 padding 부분은 클릭할 수 있지만 margin 부분은 클릭할 수 없습니다.
CSS를 처음 접할 때 굉장히 헷갈리는 점 중 하나가...
margin이 있는 태그들을 서로 나란히 놓으면 margin의 합이 아닌 최대값이 적용됩니다.
저는 최소 1m 거리두기를 원하고 님은 최소 2m 거리두기를 원한다고 할 때,
합해서 3m 거리두기를 하지는 않잖아요? 2m만 떨어져도 두 사람 다 만족하니까요.
반면, 제 padding은 제 재산이기 때문에 함부로 뚫고 들어오거나 님의 패딩과 합체할 수 없습니다.^^
동일한 결과물이라면 취향에 따라 둘 중 어떤 것을 사용하셔도 무방합니다.