CSS

마진겹침 현상

마진겹침(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. 우엥
    와 스트레스 받고있었는데 진자 박수치고 갑니다........ 존경합니다
  2. 스페이스몽키
    감사합니다!
  3. 초록색필통
    ㅋㅋㅋㅋ토마토 할때 너무 웃겨욬ㅋㅋㅋㅠㅠㅠ
    이해잘되게 자세히 설명해주셔서 항상 감사합니다♥
  4. 멜번리디아
    애고..3번정도 보니.. 헷갈리는 부분이 이해가 되네요. 감사합니다.
  5. 훔파닥
    안녕하세요 항상 수고가 많으십니다. 혹시 아톰에서 코드수정시 실시간으로 크롬화면에 적용하는 방법좀 알려주시면 감사하겠습니다.
  6. 푸른하늘
    설명을 자세하면서도 간단히 해주시고 css사전으로 예습해서 들으니깐 아주 쉽게 이해되네요
  7. 푸른하늘
    11일차 공부 감사합니다
  8. 이성준
    으아아아악 무슨 말인지 ㅠ
    겅부 더 하고 다시봐야겠당
  9. violet
    며칠 계속 이해하려고 시도하면서 따라해봤는데 알듯말듯하네요. 이고잉님 말씀처럼 css를 쓰다가 혼란스러운 상황이 생겼을 때 딥하게 파보는게 좋을 것 같아요!
  10. 오빠는다르다
    감사합니다~!!!!
  11. 이건 두번봐도 설명하기는 힘드네욬ㅋ;;;;
  12. 카라멜팝콘
    깊은마진빡침현상
    대화보기
    • 최동희
      10년 전에 css 학습을 관둔 이유 중 하나였던 게 해결됐네요.
    • 강지후
      마진빡침
    • 남준호
      마진겹침현상 세 가지
      1. 위,아래 엘리먼트들의 마진이 겹칠시 둘 중 마진이 큰게 둘 사이의 마진이 된다.
      2. 위,아래 엘리먼트들의 마진이 겹치고, 한 엘리먼트의 시각적 요소가 없어지면, 시각적 요소가 없어진 엘리먼트 마진의 top-bottom과/ left-right은 큰값으로 합쳐져 계산된다.
      3. 부모,자식 엘리먼트 사이에서 부모의 시각적 요소가 없어지면 부모,자식 마진 중 마진이 큰 쪽이 자식 마진처럼 사용된다.
    • 웅쓰
      가려웠던 부분을 속 시원하게 긁어주는 강의였습니다, 감사합니다!
    • 세븐나이츠 크랙유저
      우쭈주쭈쭈 잘해쪄용
      대화보기
      • 풋사과
        깊은빡침~ 딥빡현상
      • 세븐나이츠
        마진겹침현상 세 가지
        1. 위,아래 엘리먼트들의 마진이 겹칠시 둘 중 마진이 큰게 둘 사이의 마진이 된다.
        2. 부모,자식 엘리먼트 사이에서 부모의 시각적 요소가 없어지면 부모,자식 마진 중 마진이 큰 쪽이 자식 마진
        처럼 사용된다.
        3. 위,아래 엘리먼트들이 있을 때 위의 시각적 요소가 없어지면 위,아래 중 마진이 큰 쪽이 아래 마진처럼 사용된다
      • 알파고잉
        흠.. 지금까지 CSS 수업중에 가장 헷갈리는 부분인거 같네요.
        일단 이런게 있구나 하고 알고 넘어가고 나중에 이런 문제에 맞딱드리면 다시 공부해 봐야 겠어요^^
      • 쿠쿠다스
        감사합니다
      • 14번째
        5.20.
      • 공삼이육
        감사합니다
      • php가 첫취업?
        다시 리플레이할때 들어야 겠어요...초심자니...일단 후다닥 넘어갑;;
      • matheios
        어려운 개념인 듯..... 강의 감사합니다.
      • 김명수
        항상 감사합니다~
      • souLTrain
        아 여기서 문제를 해결할수 있었습니다 ㅠㅠ
        마진겹침에 깊은빡침 ㅠㅠ
      • NAMO
        두 엘리먼트의 마진이 겹쳤을 때 둘 중 더 큰 값이 최종 마진값을 결정한다고 기억하면 될 것 같네요:)
      • 임지호
        마진겹침현상 세 가지
        1. 위,아래 엘리먼트들의 마진이 겹칠시 둘 중 마진이 큰게 둘 사이의 마진이 된다.
        2. 부모,자식 엘리먼트 사이에서 부모의 시각적 요소가 없어지면 부모,자식 마진 중 마진이 큰 쪽이 자식 마진
        처럼 사용된다.
        3. 위,아래 엘리먼트들이 있을 때 위의 시각적 요소가 없어지면 위,아래 중 마진이 큰 쪽이 아래 마진처럼 사용된다
      • feel5
        깊은 화남 ㅎㅎㅎㅎㅎㅎ http://mlkshk.com/p/PPML
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기