Extra Form
PHP PHP 7.2
CMS Rhymix 2.0

예를 들어 게시글 본문 제일 끝에서 40px 하단에 추천 버튼을 배치 시키고 싶을 때

 

추천 버튼에게 padding-top:40px 를 주는것과 margin-top:40px 를 주는것 중에 어느 것이 맞는 건가요

 

둘 다 겉으로 보이는 모습은 동일한 거 같은데 뭔가 일반적으로 사용하는 법칙(?) 같은게 있는 건가요?

  • profile
    margin은 외부 여백이고 padding은 내부 여백입니다.
    동일한 결과물이라면 취향에 따라 둘 중 어떤 것을 사용하셔도 무방합니다.
  • profile
    윗분 말대로 외부 여백 내부 여맥의 의미가 있는데..
    해당 클래스(엘리먼트)가 만약 테두리에 선이 있는 형태이라면 내부여백을 줄것인지 아니면 외부 여백을 주것인지에 대해서 정확하게 인지하시고 분활하여 사용하셔야 합니다.

    테두리의 위치 안으로 여백을 원할때가 있고 테두리의 위치 밖으로 여백이 있으면 좋을것 같은 것이 있거든요..

    보통 추천버튼을 하단에 배치한다는 의미는 내부여백보단 외부여백으로 거리를 주는것이 맞기때문에 margin이 더 좋습니다.
  • profile
    https://jsfiddle.net/8g51jxwc/4/

    둘다 100px 사각형에 10px씩 여백을 줬지만 위쪽은 margin을, 아래쪽은 padding을 이용했습니다.
    margin은 외부 여백이므로 배경색 지정한 것에 영향을 받지 않습니다.
    padding은 내부 여백이므로 배경색 지정한 것에 영향을 받습니다.

    결론적으로 margin은 사각형 크기는 100px 그대로이나 여백이 생겼고 padding은 사각형 자체는 120px로 증가했으나 글자는 여전히 100px 크기 사각형 기준으로 배치되었습니다.

    질문글 사례로 돌아와서 padding-top과 margin-top 동작이 같다면 사실 둘중 어느걸 사용해도 무방합니다. 동작이 같다는건 padding을 사용해서 내부 여백을 줘도 크게 상관이 없다는 이야기거든요.

    하지만 보통 버튼사이 여백을 띄울땐 일반적으로 margin을 사용합니다. 버튼이 존재하는데 무작정 padding을 지정하면 버튼자체가 늘어나 버릴수 있기 때문입니다.
  • profile ?
    아하 margin은 거리만 띄우고 padding은 거리를 띄우면서 배경색이 그 공간에 채워지는군요
  • ? profile
    padding을 주면 width, height가 늘어납니다. box-sizing을 border-box로 주지 않은 경우라면요!
  • profile

    padding은 그 태그가 차지하는 공간에 포함되고, margin은 옆 태그와 사회적 거리두기 하는 것입니다.

    배경색을 지정하면 padding 부분은 색이 칠해지고, margin 부분은 칠해지지 않지요.

    마찬가지로, 링크의 padding 부분은 클릭할 수 있지만 margin 부분은 클릭할 수 없습니다.

     

    CSS를 처음 접할 때 굉장히 헷갈리는 점 중 하나가...

    margin이 있는 태그들을 서로 나란히 놓으면 margin의 합이 아닌 최대값이 적용됩니다.

    저는 최소 1m 거리두기를 원하고 님은 최소 2m 거리두기를 원한다고 할 때,

    합해서 3m 거리두기를 하지는 않잖아요? 2m만 떨어져도 두 사람 다 만족하니까요.

    반면, 제 padding은 제 재산이기 때문에 함부로 뚫고 들어오거나 님의 패딩과 합체할 수 없습니다.^^

  • profile ?
    그렇군요 여러 요소들이 연속적으로 있을때 margin 과 padding 간섭 관계를 고려해야겠네요
  • profile profile
    정말 css 처음 배울 때 margin-collapse(마진겹침)으로 엄청 혼란스러웠던 기억이 나네요ㅠㅠ^^

    어느 상황에선 margin들을 적용할때 margin이 합이 되지 않고 하나면 적용되어 왜 그렇게 프로그래밍 되었는지 의아해서 구글링도 해보고 문의도 해봤는데 완벽한 명확한 개념,로직을 못 찾았던 기억이 나네요.

    마진겹침에 대해 master 하긴 해야 될 듯 합니다. 언젠가는........