[css] 마진 병합

aequum

· 13년 전 · 조회 1975 1975 · 댓글 2 2

마진 병합을 이해 못하는 사람들이 많다는 것에 간혹 놀랍니다. 단순히 마진을 내부 여백은 패딩과 비교하여 바깥 여백만으로 생각하면 문제가 심각해집니다. 마진 병합은 2개의 요소가 서로 이웃하여 만나는 경우, 하나의 마진인듯이 큰 값으로 적용됩니다.

가령 3px의 마진을 가진 a,b 요소가 수직으로 만나게 된다면 둘 사이의 거리는 6px이 아니라 3px이 됩니다. 이것까지는 이해하지만 문제는 부모와 자식 요소 사이에 마진 병합 발생입니다.

부모와 자식사이에 발생된 마진 병합 처리는 구형 IE 브라우저는 제대로 처리 못합니다. 3px 마진을 가진 부모내에 5px의 마진을 가진 자식이 위치한다면 부모의 마진이 5px로 작동됩니다. 이것이 꽤나 기괴하게 보일 수 있고 또 브라우저에 무슨 오류난 것이 아닐까라는 착각도 하게 만듭니다. 그러나 이것은 어디까지나 제대로 작동되는 마진병합입니다.

자식의 마진은 부모의 마진을 변경시킬 수 있습니다. 자식의 마진이 10px이면 부모의 마진이 5px인데도 10px로 됩니다. 그러나 이러한 자식과 부모의 마진 병합 발생을 방지하려면 부모 요소에 padding이나 border 설정이 1px 이상 있으면 됩니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

kitty1112345

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

그렇군요 ...*^^*

신비짱

프로필 보기 이 회원 글보기 이 회원의 댓글보기

10년 전

이런 심오한 이치가 숨어 있었군요....

게시글 목록

번호	제목	글쓴이	조회	날짜
15500	JavaScript Cshop님 여기를 봐주세요. 5	aequum	813	13년 전
26129	큰 업체라도 다를게 없는 .... 4	벤지	1,035	13년 전
29907	HTML 날나리 강좌. ㅋ HTML DTD 1	aequum	1,315	13년 전
29906	HTML SGML에서 HTML까지 마크업언어에 관한 간략한 이해	aequum	1,389	13년 전
15497	Flash 플래쉬 초짜의 질문입니다 ㅠㅠ 2	카페지기	769	13년 전
15495	JavaScript 자바스크립트 자료형을 생각하면 지끈지끈 1	aequum	911	13년 전
15486	node.js node.js로 프록시 서버를 만들다 엉뚱한 생각이.... 8	aequum	1,628	13년 전
29905	HTML [css] width, height의 이해	aequum	2,724	13년 전
29902	HTML [css] 마진 병합 2 현재글	aequum	1,976	13년 전
29901	HTML [css] z-index 초기값 auto 사용 주의	aequum	2,039	13년 전
29900	HTML [css] 속기 font 속성 사용시 주의	aequum	1,448	13년 전
29899	HTML 공백 문자의 병합	aequum	1,252	13년 전
29898	HTML 제대로 단위 사용하자	aequum	1,156	13년 전
15483	JavaScript 자바스크립트에 대한 오해 - 객체 2	aequum	932	13년 전
3556	2011년도의 12월도 하루남았네용	쿤이	399	13년 전
15478	MySQL mysql 의 한 테이블에 들어있는 필드들을 한필기준으로 중복된부분은 한번만 출력하기 4	Raincommunication	1,313	13년 전
15471	node.js nodejs용 iconv (STDIO) 6	aequum	4,419	13년 전
15465	JavaScript 중앙정렬만 하면 툴팁 좌표가 어긋납니다. 5	티니베리	1,287	13년 전
29892	HTML 혹시.. color=grey 라고 아세요? 5	b1ack	1,052	13년 전
15462	PHP insert 2	케파서버	554	13년 전
15459	MySQL putty 질문 좀 드리겠습니다 2	후라보노보노	782	13년 전
15458	Linux lsync 사용하기	선택이란	606	13년 전
3554	불당님 여기 안오시나봐요 1	levin	491	13년 전
3546	개발자가 디자인 공부하는건 별로겠죠....ㅡ_ㅡ;;; 7	포그난	565	13년 전
15452	PHP php 다른질문~ 5	우리까미	552	13년 전
15448	PHP php간단한 질문좀요 3	우리까미	492	13년 전
15441	JavaScript 팝업창에 주소를 복사한후 브라우져 붙여넣기를 합니다. 그것을 막는 방법이 없을까요? 6	노을라나	1,362	13년 전
15426	PHP insert 질문. 14	케파서버	683	13년 전
15424	Linux 루트비번 재설정 1	선택이란	535	13년 전
3544	개발자로 산다는건 평생 공부해야 하는거겠죠....ㅡ_ㅡ;;; 1	포그난	511	13년 전
3538	개발자분께 심도있는 질문이 있습니다. 5	내꿈은대통령	570	13년 전
15423	MySQL 다른 테이블로 데이터 복사	비지니스	870	13년 전
15422	MySQL grant 새 사용자 권한주기	비지니스	774	13년 전
15419	jQuery 체크박스 체크여부에 따라 나타나고 사라지게 2	비지니스	1,362	13년 전
15418	JavaScript 그누보드 에디터에서 폰트 크기를 포인트로 사용할 수 있나요?	박팍	978	13년 전
26116	제안서 제안서 입니다. 12	원시인교주	3,439	13년 전
15417	Linux 쉘스크립트 백업 설정	선택이란	653	13년 전
15415	Mobile 옵티머스 LTE 위치파악 오류 1	배추벌레	1,208	13년 전
15405	JavaScript 닫기버튼 흐극 이거 우째할까요 9	우리까미	945	13년 전
15403	jQuery ajax 로 외부페이지 불러왔을 때 wrest.js 적용하는 방법 1	지운아빠	2,682	13년 전
15400	jQuery 음~ Jquery 로 Fadein Fadeout IE8에서 질문입니다 2	Kanzi	2,295	13년 전
15398	PHP 도움을 부탁드립니다..ㅠㅠ 1	393939	500	13년 전
3530	구글웹마스터 도구에 대하여 (엄청 긴--- 글입니다) 7	엔피씨	1,558	13년 전
15395	PHP 질문좀 드릴께요ㅠㅠ 2	393939	511	13년 전
15394	Flash 플래시8 버전 눈내리는 효과 입니다	alenjoe	2,310	13년 전
15391	jQuery jQure-menu 메뉴 서브포함 2	alenjoe	1,851	13년 전
3526	간단한건가?질문하나할게요!!! 3	우리까미	464	13년 전
15368	jQuery 세상에서 가장 빠른 jQuery 단계 메뉴 - 매우 부드럽고 반투명이라 예쁩니다. 22	cshop	5,550	13년 전
15366	JavaScript 광고고정하는법좀 알려주십사 글남겨요 1	우리까미	815	13년 전
15355	jQuery 제이쿼리 질문 어디다하면 좋을까요.. 10	수박죽	1,328	13년 전
29886	HTML 거참 이거 질답에올려야하나여기올려야하나;; 5	우리까미	1,146	13년 전
15354	Linux 리눅스 설치후 selinux 설정하기	선택이란	1,192	13년 전
15349	기타 이클립스 java 컴파일러시.. 문제점 문의좀 4	다프린	1,066	13년 전
29884	HTML 이미지를 돌려요 ~ 1	낄낄닷컴	1,073	13년 전
15345	node.js 질문~ 3	Terrorboy	903	13년 전
26103	투잡으로 어플이 대세?? 12	스누피사랑	1,254	13년 전
15342	PHP wget으로 외부 컨텐츠 가져오기 2	스누피사랑	1,639	13년 전
15339	PHP PHP 보안문서 2	스누피사랑	664	13년 전
15335	기타 웹해킹 실전기술 세미나 자료 3	스누피사랑	1,037	13년 전
3521	[질문]scriptx 를 사용하여 프린터 출력을 하려고하는데요 4	한번잘해보자	2,076	13년 전
15330	node.js nodejs에서 mysql 사용 4	명랑폐인	1,921	13년 전
26102	법인설립시 준비사항	관리자	877	13년 전
29883	HTML css3 메뉴	mydie	1,371	13년 전
15327	Mobile jquery mobile 에서 non ajax form submit 하기 2	관리자	3,859	13년 전
15326	PHP from_camel_case, to_camel_case	명랑폐인	595	13년 전
15310	Mobile 모바일 홈페이지를 가장 빨리만들수 있는 소스~ 15	Terrorboy	2,584	13년 전
15300	jQuery easing을 쉽게 보여주는 이미지입니다 9	onlymilk74	1,364	13년 전
15299	MySQL 카테고리에 적합한 쿼리 형식	선택이란	1,796	13년 전
15298	MySQL mysql 리플리케이션 쿼리스킵	선택이란	1,014	13년 전
3518	php의 데이터를 배열로 만든후 자바스크립트에서 이용하는법을 알고싶습니다. 2	쒜낏쒜낏	778	13년 전
15292	node.js node.js가 갑자기 땡기네요..^^ 5	똥싼너구리	783	13년 전
15290	node.js node v0.2.6 한글 번역 1	관리자	921	13년 전
15289	node.js URL파싱	Terrorboy	1,001	13년 전
15286	node.js node.js에서 html불러오기 2	Terrorboy	1,881	13년 전
29882	HTML 스타일시트 선언에서 media="screen" 와 media="print"의 차이점	port	3,130	13년 전
29880	HTML 가변 위치에 배너 붙이기 1	관리자	2,179	13년 전
3513	스마트폰에서 그누보드 게시판에 사진 업로드 4	오소피아	884	13년 전
24328	커뮤니티 기획관련하여 글을 남겨봅니다. 9	이천이지	1,499	13년 전
15281	JavaScript 이거으용좀하고싶은데;;;히히 4	MH코리아	1,739	13년 전
15280	Linux apache에서 유저권한으로 파일 변경하기	밀로즈	544	13년 전
15277	PHP php 로 파일 압축/ 해제하기. 2	알찬돌삐	1,786	13년 전
29876	HTML [css질문]<input type=text>에 한글을쓰면 textbox가 움직이는데... 3	b1ack	3,021	13년 전
26096	통계자료 웹사이트 성능분석 보고서 5	선택이란	1,705	13년 전
3504	홈페이지제작하는데 가장 빠른거는 역시 그누인듯... 8	파코	2,638	13년 전
3496	직원들에게 동기를 부여하는 9가지 방법 7	명랑폐인	3,946	13년 전
3487	웹개발 참 피곤합니다.... 8	파코	3,981	13년 전
3481	돌아돌아 개발의뢰를 맞았는데 원래 개발자가 아니라 개발비를 어떻게 잡아야할지 모르겟네요^^ 5	아이피마스터	2,388	13년 전
15275	jQuery jquery 질문입니다 ㅠㅠ 1	미운오리스키	831	13년 전
15274	Linux 리눅스하드 스탠바이 모드설정	선택이란	1,118	13년 전
3475	저는 아직 어린가봐요...ㅠ.ㅠ 5	명랑폐인	3,938	13년 전
29872	기타 알아두면 손 발이 편한 du 명령어 3	Kanzi	2,261	13년 전
29870	HTML [vim] 주석 달기~ 1	Kanzi	1,412	13년 전
3468	드디어,.. 6	리발련	3,778	13년 전
3466	ABAP 개발자입니다 1	모포	2,456	13년 전
3463	그런데, 이게시판의 제목 글짜들이 이상하게 보여요 2	다시시작	538	13년 전
3455	개발자로 직업을 바꾸려 합니다 7	다시시작	2,443	13년 전
3452	개발자를 위해서 그누보드도 마켓을 도입해야 할듯~ 2	파코	593	13년 전
15268	node.js 노드 항상 실행 어떻게 하시나요? 5	Terrorboy	829	13년 전
15267	Mobile 보리안드로이드	미스코리아	1,661	13년 전
15266	Mobile 앱스프레소	미스코리아	1,287	13년 전

이전 다음

38 39 40 41 42

전체 목록