생활코딩

Coding Everybody

코스 전체목록

닫기

마진겹침 현상

마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상을 의미합니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다. 

마진겹침 현상 1

 예제 - margin-collapsing-1.html

<!DOCTYPE html>
<html>
  <head>
      <style>
          h1{
              border:1px solid red;
              margin:100px;
          }
      </style>
  </head>
  <body>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  </body>
</html>

마진겹침 현상 2

예제 - margin-collapsing-2.html

<!doctype html>
<html>
<head>
    <style>
        #parent{
/*            border:1px solid tomato;*/
            margin-top:100px;
        }
        #child{
            background-color: powderblue;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
            Hello world
        </div>
    </div>
</body>
</html>

 마진겸침 현상 3

예제 - magin-collapsing-3.html 

<!doctype html>
<html>
<head>
    <style>
        #empty{
            margin-top:50px;
            margin-bottom: 100px;
/*            border:1px solid tomato;*/
        }
        #normal{
            background-color: powderblue;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div id="empty"></div>
    <div id="normal">normal</div>
</body>
</html>

댓글

댓글 본문
  1. choi
    완료
  2. width를 퍼센트로 지정시 inline-block으로 주면 패딩이 중첩이 안되네여 ..!
  3. yogg
    이런 현상이 있었군요! ㅠ,ㅠ 실무에서 마주치면 정말 빡칠듯..ㅋ
  4. 마릴곰이
    오와 도대체 왜 이러지 하고 머리 싸매던 적이 있었는데 이 이유였군요! 이번 영상도 감사합니다ㅎㅎ

    궁금해서 이유를 찾아보니, margin을 "이 요소를 10px만큼 움직여주세요"라기보다, "이 요소는 다른 *보이는* 인접한 요소와 10px 떨어져 있게 해주세요"라고 생각하면 쉽다고 하네요!
    (선생님의 첫번째 동영상 설명과 일맥상통합니다.)

    더 궁금하신 분들은 - https://stackoverflow.com......890
  5. 마진이 제대로 동작하지 않을때 볼것
  6. 오광석
    굉장히 어렵고, 그리고 중요하지 않은 ㅋㅋㅋ
    개념만 이해하고 넘어갑니다. 감사합니다.
  7. 임태경
    완료했어요 감사해요
  8. 스마일가이
    2021.01.26 완료 감사합니다
  9. datsciseol
    20210116
  10. malbong
    1. 위아래(형제) 엘리먼트 중에 margin값이 큰 값을 취함

    2. 부모자식 관계중에

    - 부모 엘리먼트의 시각적인 요소가 있다면 마진겹침은 일어나지 않음

    - 부모 엘리먼트의 시각적인 요소가 없다면 마진겹침은 부모자식 중 margin 값이 큰 값을 취함

    3. 어떤 엘리먼트에 시각적인 요소가 없고 margin-top, margin-bottom이 서로 다르면 (cf. top-bottom / left&right 치환해서 봐도 됨)
    - 엘리먼트 혼자서 마진이 겹친다고 생각하면 됨

    - 이 엘리먼트 혼자서 마진겹침은 top과 bottom중 margin 값이 큰 값을 취함

    - 엘리먼트가 시각적인 요소가 있다면 위의 1과 똑같은 마진겹침
  11. 주니어개발자
    베리 나이스 땡큐
    대화보기
    • 201214 마진겹침현상 3은..진짜 어렵네요. 나중에 다시 보겠습니다
    • Seunghyuk Rodrigo Kim
      감사합니다.
    • 만듀
      20201109
    • 켄드릭
      2020년 11월 04일(수) 11:38 1차 수강완료
    • jaehyunlee
      완료
    • 박병진
      2020.10.04 완료
    • 콜라
      20200927 완료
    • 김성곤
      20200722 감사합니다!
    • jaehyunlee
      완료
    • 한강
      마진 겹침 현상이라는게 있구나 잘 배웠습니다.
      200604 ^^!
    • sinseiki
      그래서 겹치는 일이 생기면 둘 중 하나는 패딩으로 대체합니다.
    • laqah
      와 진짜 어렵네요.. 3번째에서 #empty margin-top의 살구색 표시는 nomal 위쪽으로 50px인데 실제 적용된건 margin 중 최댓값인 100px이군요... 그래도 이렇게 어려운 걸 꼭꼭 씹어 배울 수 있어 행복합니다
    • 무지개반사
      완료
    • Blanc
      2020.01.05
    • raram2
      https://velog.io......ing
      강의 듣고 이것저것 보충해서 정리 해봤습니다
    • 태태
      수강완료
    • 치디우기
      수강 완료 - 19/08*/29
    • 류석현
      수강완료
    • FIRE
      20190729 완료
    • 다나가
      190723 - 수업완료!!
    • Yoonsik Park
      마진겹침 CSS Spec : https://www.w3.org......ins
    • 김주엽
      수업완료
    • 노혜주
      완료
    • lygon
      2019-03-02 완료
    • 한승민
      190216 계속 봐야할것같아여 정리해주셔서 감사합니다!!^^
    • Jung Hwan Sung
      '마진겹침 현상 3'의 5분7초 즈음에 margin-bottom이 100px 이하에서 변경될 때는 움직이지 않습니다
      margin-top의 값과는 관계가 없는 것 같습니다
    • 득구태웅
      감사합니다. 확실한 정리!
    • 퍄퍄퉁
      감사감사!! 3개 다봤어요
    • 숨이
      완료햇습니당
    • Army
      미친듯이 새로 고침 했던 기억이..............
      영상을 좀 더 일찍 봤으면 했던 아쉬움이 남지만 덕분에 지금이라도 원인을 알았습니다 감사해요!
    • Army
      에디터 브라켓 기능입니다 영상 우측에 번개모양 클릭하면 되는걸로 알고 있어요
      대화보기
      • seink56@naver.com
        코딩을 하면서 바로바로 브라우저에 적용되게 하는거 어떻게 하나요..?
      • 김민영
        완료
      • 우엥
        와 스트레스 받고있었는데 진자 박수치고 갑니다........ 존경합니다
      • 스페이스몽키
        감사합니다!
      • 초록색필통
        ㅋㅋㅋㅋ토마토 할때 너무 웃겨욬ㅋㅋㅋㅠㅠㅠ
        이해잘되게 자세히 설명해주셔서 항상 감사합니다♥
      • 멜번리디아
        애고..3번정도 보니.. 헷갈리는 부분이 이해가 되네요. 감사합니다.
      • 훔파닥
        안녕하세요 항상 수고가 많으십니다. 혹시 아톰에서 코드수정시 실시간으로 크롬화면에 적용하는 방법좀 알려주시면 감사하겠습니다.
      • 푸른하늘
        설명을 자세하면서도 간단히 해주시고 css사전으로 예습해서 들으니깐 아주 쉽게 이해되네요
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기