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. Army
    미친듯이 새로 고침 했던 기억이..............
    영상을 좀 더 일찍 봤으면 했던 아쉬움이 남지만 덕분에 지금이라도 원인을 알았습니다 감사해요!
  2. Army
    에디터 브라켓 기능입니다 영상 우측에 번개모양 클릭하면 되는걸로 알고 있어요
    대화보기
    • seink56@naver.com
      코딩을 하면서 바로바로 브라우저에 적용되게 하는거 어떻게 하나요..?
    • 김민영
      완료
    • 우엥
      와 스트레스 받고있었는데 진자 박수치고 갑니다........ 존경합니다
    • 스페이스몽키
      감사합니다!
    • 초록색필통
      ㅋㅋㅋㅋ토마토 할때 너무 웃겨욬ㅋㅋㅋㅠㅠㅠ
      이해잘되게 자세히 설명해주셔서 항상 감사합니다♥
    • 멜번리디아
      애고..3번정도 보니.. 헷갈리는 부분이 이해가 되네요. 감사합니다.
    • 훔파닥
      안녕하세요 항상 수고가 많으십니다. 혹시 아톰에서 코드수정시 실시간으로 크롬화면에 적용하는 방법좀 알려주시면 감사하겠습니다.
    • 푸른하늘
      설명을 자세하면서도 간단히 해주시고 css사전으로 예습해서 들으니깐 아주 쉽게 이해되네요
    • 푸른하늘
      11일차 공부 감사합니다
    • 이성준
      으아아아악 무슨 말인지 ㅠ
      겅부 더 하고 다시봐야겠당
    • violet
      며칠 계속 이해하려고 시도하면서 따라해봤는데 알듯말듯하네요. 이고잉님 말씀처럼 css를 쓰다가 혼란스러운 상황이 생겼을 때 딥하게 파보는게 좋을 것 같아요!
    • 오빠는다르다
      감사합니다~!!!!
    • MunBe
      이건 두번봐도 설명하기는 힘드네욬ㅋ;;;;
    • 카라멜팝콘
      깊은마진빡침현상
      대화보기
      • 최동희
        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 자세히 보기