CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

마진 겹침

마진겹침(margin collapsing) 규칙이란?

마진이 세로 방향으로 겹쳤을 때 마진 값이 더 큰 쪽을 따르게 되는 현상

  • 형제 엘리먼트 간 (예제1)
  • 부모/자식 엘리먼트 간 (예제2)
  • 시각적인 요소가 없는 엘리먼트 자체적으로 (예제3)

예제

example1.html - 형제 엘리먼트 간의 마진겹침 현상 (jsfiddle, github)

<!DOCTYPE html>
<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <style type="text/css">        
body {
    border:1px solid blue;
}
p {
    margin:20px;
    border:1px solid red;
}
        </style>
    </head>
    <body>
		<p> 생활코딩1 </p>
		<p> 생활코딩2 </p>
		<p> 생활코딩3 </p>
		<p> 생활코딩4 </p>
    </body>
</html>

example2.html - 부모 / 자식 엘리먼트 간의 마진겹침 현상 (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body style="border:1px solid blue">
		<div style="margin-top:100px;">
			<div style="margin-top:50px; background-color:green">
				마진겹침
			</div>
		</div>
	</body>
</html>
마진겹침이 적용되지 않았을 때 마진겹침이 적용 되었을 때

example3.html - 자기 자신의 마진 겹침, 엘리먼트가 컨텐츠로 시각적인 요소를 가지고 있지 않을 때 그 엘리먼트는 상하 마진 중 더 큰 값이 적용된다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body style="border:1px solid blue">
		<div style="margin-top:20px;margin-bottom:20px;"></div>
		<div style="margin-top:20px">
			마진겹침
		</div>
	</body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다.
    재밌어요..간결하게 설명해주셔서 이해가 잘 됩니다.
  2. yihsang
    감사합니다.
  3. Rhys Jung
    웹 어플리케이션을 정주행하고 나니 박스모델이 이해하기 한결 쉽네요 감사합니다.
  4. 링고쥬스
    쉽게 설명해 주셔서 이해하기 좋아요 ~ ^^
  5. JustStudy
    고맙습니다
  6. 빨강머리앤
    감사합니다... ^^
  7. 오 정말 이해가 잘 돼요~ 감사합니다!
  8. 크레용샘
    마진겹치기, 설명잘 해주셔서
    이해가 쏙쏙 잘 되네요.
    감사합니다`^^
  9. 통조림
    정보 공유 감사합니다 ㅋㅋ
    대화보기
    • 손님
      CSS가 꼭 시각적으로 보여야 하도록 코딩하는 것만은 아니에요
      나중에 공부하는 부분 보시면 레이아웃을 구성하는 걸 배울 때
      굳이 화면에는 나타나지 않아도 쓰이는 부분도 있습니다
      애니메이션이라던지..(화면에 나오는 부분은 HTML로 하고)
      대화보기
      • 박현경
        강의 즐겁게 잘 듣고 있어요~

        마진 겹침 현상을 듣다가 궁금해서 글을 올립니당

        컨텐츠(시각적으로 화면에 보이는 것)가 없는 데 css로 코딩을 하는 경우는 왜인가요??

        css는 시각적인 요소를 꾸며주는 역할로 이해하고 있는데 굳이 보이지 않는 부분에

        마진값을 주는 게 이해가 안되서요ㅎ
      • 김현미
        강의 듣다가 궁금해서~ 선생님이 쓰시는 자 유틸리티는 어디서 구할수 있어요?^^
      • 이네스김
        코코딩님 감사합니다. 자 깔고 싶었는데 역시 누군가 찾아놓으셨군요 ^^
        얻어가는 게 정말 많아요.
        CSS 할 줄 안다고 생각했는데, 무심코 하던 것들의 의미를 정확히 알게 되어서 정말 뜻깊습니다.
      • 골뱅이미디어스크린앤드
        깜짝이야...자!ㅋㅋ

        저도 css는 다 안다고 생각했는데
        학원에서 마진겹침을 이렇게 안 가르쳐 줬어여-_-
        혹시 또 모르는게 있을지 모르니까 css도 한번 싹 훑어야겠네요~
        감사합니다^^
      • 미스타죠
        와 진짜 저 이런거 잘쓰는 사람이 아닌데
        설명이.... 아주 숨지네요

        어마어마한 강의 감사합니다
      • 김영준
        좋은강의 정말 감사합니다.
        공부중 이해가 되지 않는 증상이 있었는데 이 강의를 듣고나니.. 마진겹침 현상때문이었구나! 싶었는데
        확신이 서질않아 질문합니다.

        <div id="container">
        <div id="content"></div>
        </div>
        #container { position:relative; background-color: #999999 }
        #content { position:relative;width:100px;height:100px;margin-top: 200px;background-color: green }

        이런경우에 자식(content )의 마진값 200px이 부모에게 영향을 끼쳐
        부모(container)의 마진값이 자식의 마진값 200px으로 적용이 되는데 이런경우
        [ example2.html - 부모 / 자식 엘리먼트 간의 마진겹침 현상 ] 으로 봐도 될까요?
        물론 부모에게 마진값을 적용해도 자식과 부모의 마진값 중 더 큰값으로 적용이 됩니다.

        그리고.. 시작적인 요소가 포함되고있지않을때.. 이게 부모/자식 엘리먼트간의 마진겹침 현상에도
        동일하게 적용되는건가요?
        위와 같은 상황에서 container div 에 텍스트를 하나라도 넣으면 마진겹침 현상은 나타나지 않습니다.

        그리고 또 한가지.. 자식의 position이 absolute 일 경우도 마찬가지로 마진겹침 현상은 나타나지 않습니다.
        position 을 absolute 로 잡을경우 absolute는 영역을 차지하지 않아서
        마진겹침 현상이 나타나지 않는거같은데
        제가 이해하고 있는게 맞을까요?
      • 코코딩
        구글 크롬 확장 프로그램중에서
        Page Ruler란 프로그램도 있는데 정말 괜찮더군요.

        https://chrome.google.com......bpn

        에서 다운받을수 있습니다.~
        대화보기
        • 김성희
          자 찾아주셔서 감사합니다. 사이즈 잴때 매번 포토샵을 열어야 했던게 귀찮았어요.
          대화보기
          • 코코딩
            ㅎㅎ 저 자 너무 신박해서 찾아봤습니다.
            http://www.arulerforwindows.com/
            여기서 다운받아 볼 수 있더군요.!ㅎㅎ
          • 울라라
            생활코딩 사이트를 왜 이제야 알게되었는지
            왠만한 유료강좌 보다 내용이 알차네요
            정말 감사합니다
          • WISDOM89
            HTML 초보예요. 두달 동안 포트폴리오 만들면서 마진값 때문에 진전없이 힘들었는데
            좋은 강의 보게 되어 정말 기뻐요~! 정말 감사합니다!!!!!!!!!!!!!!!!!!!!!!!!!
          • 샤핀
            강의에 등장하는 저 자의 이름은 뭔가요? ㅋ
            강의 잘 봤습니다. 감사합니다.
          • 마진
            다시확인해보니 잘 들리네요~!ㅎ
            대화보기
            • egoing
              저는 괜찮은 것 같은데요? 많이 지직 거리나요?
              대화보기
              • 마진
                첫번째동영상 소리가 너무 지지직거리네요ㅠ
              • 무른
                자기자신 마진겹침이 햇갈리긴 하네여ㅎ
                그래도 자까지 활용해주시니 책으로 보는 것보다
                100배 더 이해가 쉽네요^^
              • 수강생
                가로로 마진겹침은 어떻게 되나요?
              • egoing
                프로그램이 있습니다. 오래 되서 저도 무엇인지는 기억이 안나네요. ruler로 검색해보세요.
                대화보기
                • endlesstree
                  좋은 강의 정말 잘 봤습니다. 목소리도 매우 좋으시네요!

                  근데 정말 정말 궁금한 게..

                  저 자는 뭐죠?????????????
                  어떻게 하신거에요?!
                • lookie
                  저 자는 뭐죠???????????????
                • 별모모
                  [ "시각적인 요소가 없을 때"가 문제 ] 수정을 했는데도 끔쩍도 안 하는 것을 보면서 당황한 적이 있었는데, 시각적인 요소가 없는 객체의 "마진겹침" 현상 때문이었군요. 이 "마진겹침 현상"이 갑자기 사라지거나 나타날 때 디자인이 망가지기 쉽습니다.

                  * margin이나 padding을 조정했는데도 움직임이 없다면, 인접한 (부모/형제/내부)요소의 margin, padding를 확인한다.
                • 빈누
                  margin에 대한 개념이 대충 있는 상태에서 코딩한적도 많은데, 이제는 제대로 알고 할 수 있겠네요. +_+
                • winters
                  마진을 쓰면 예상과 다르게 나오는 경우가 많아서 의아했었는데, 이런게 있었군요!
                • 은비
                  자 등장에 깜짝놀랐네요 ㅇㅅㅇ! 작업중에 사용하면 좋을것 같은데 이 자 기능은 어디에서 찾아볼 수 있나요~?
                  몇년을 코딩을 해봤지만 마진겹침에 대한 정확한 개념이 없어서 헤매던적이 많았는데 이번에 제대로 배웠어요..감사합니다 ^^
                • 다 아는 줄 알았는 데 이런 게 있었군요. 디자인하다 왜 안먹히지? 코딩을 잘못했나? 쓸데없이 다른 데서 찾고 있었는 데... 감사합니다. 최고입니다.^^
                • 올립
                  이걸 몰라서 저는.. 그동안 개고생을 했던겁니다..
                • 용12
                  짱이네요진짜... 감사합니다 ㅎㅎ
                • 퍼블릭 퍼블리셔
                  example2>컨텐츠 랩핑으로 사용된 상위div의 마진값이 100일때(no text, no image)하위div 마진값이 50이라면(text or image)실제 적용되는 마진값은 시각적 요소를 가진 하위 마진값을 따르지 않고 값이 더큰 상위 div의 마진값을 따른다. 로 정리 되겠네요
                • 구루비
                  css를 사용한 지가 13년이 넘었는데.. 이걸 이제야 알았네요.. 나름 충격이었습니다.. ^^
                • ssmk
                  목소리가 매력적이에욬ㅋㅋㅋ 덕분에 강의 아주 잘 듣고 있습니다!!!
                • Sung
                  그럼 결론은 margin_bottom 의 픽셀이 20px이고 margin_top 20px 즉 ,
                  픽셀이 같으면 40px이 되지 않고 20픽셀이 되는 거고, 두개가 20px 30px이면 그 큰 픽셀 30px로 마진이 정해지는 거라 생각하면 될까요???
                • jikiri
                  오늘도 감사합니다^^
                • neO matpclub
                  와 저도 처음 알게 되었네요.
                • Starmomo
                  마침겹침을 증명하는 "자"의 등장! 대박입니다. 깜놀~ ^^ 점점 흥미진진해집니다.
                • Wise
                  박스모델에서 margin 내부에는 padding, border, content 가 있습니다. 강의 내용중 쉽게 이해시키기 위해서 "시각적인 요소를 가지고 있지 않다"는 말이 많이 나오고 있습니다. (content와 border만 언급되고 있습니다.)
                  padding도 포함이 됩니다.
                  element와 element 사이의 padding, border, content가 없어서 margin과 margin병합 되는 현상으로 풀어도 괜찮을 것 같습니다.
                • Myungguan Zoomyungguan
                  귀에 쏙쏙들어와요 감사합니다
                • egoing
                  고맙습니다 ^^
                  대화보기
                  • jamesleeplan
                    오타 발견 ^^margin collaping---> margin collapsing
                  • tana
                    이건 저도 처음 알았네요.... 이런 부분 때문에 여태 약간씩 어긋났던듯 싶습니다.중요한 걸 알게 되어서 감사합니다.
                  • Jae Sung So
                    중요한 개념을 알게 되었네요. 수고하셨습니다~
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기