[css] 마진 병합

aequum

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

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

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

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

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

댓글 작성

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

로그인하기

댓글 2개

kitty1112345

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

13년 전

그렇군요 ...*^^*

신비짱

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

10년 전

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

게시글 목록

번호	제목	글쓴이	조회	날짜
15265	Mobile 맥부기카페	미스코리아	1,543	13년 전
26093	서식 세금계산서기본양식 엑셀 2	파코	1,106	13년 전
15262	Mobile 하이브리드앱 공부를 위한 추천책 2	파코	2,095	13년 전
3437	개발자가 디자인을 하기란... 14	코코남편	775	13년 전
15257	node.js 노드에 관심이 가기 시작했습니다.~~ 4	Terrorboy	788	13년 전
3429	php로 sms발송되면서 글이 꺠지는 문의 7	천국의눈믈	612	13년 전
15256	기타 [maven] Artifct 파일 검색	visualp	1,422	13년 전
15252	Flash flash에서 마우스 오른쪽 버튼 사용하기 3	visualp	1,036	13년 전
15251	PHP [ActionScript 3.0] HashMap	visualp	759	13년 전
15250	jQuery [jplayer] jquery 기반으로 개발된 mp3 player 입니다.	visualp	5,291	13년 전
15246	PHP php로 이미지 흑백효과 3	이쫑	1,892	13년 전
15242	jQuery jQuery 1.7 Cheat Sheet 3	쵸파	1,133	13년 전
3425	vimeo 관련해서.. 3	이츠유	630	13년 전
3418	MySQL 자기참조 순환계층형 쿼리 6	밀로즈	9,422	13년 전
15236	JavaScript 포토샵CS3에서 글씨 쓰는 도중 굴림체로 글꼴이 자동으로 변경될 때가 있습니다. 5	제네시스	1,539	13년 전
3411	갑자기 궁금한 점이 생겼습니다. 6	CrazySnoopy	558	13년 전
15233	node.js 요즘 공부를 못하고 있습니다. 2	명랑폐인	542	13년 전
15229	jQuery [jquery] 구글 jquery 호스팅 3	K찰스	1,412	13년 전
15228	Flash [PODCAST]순위올리기	visualp	1,985	13년 전
15226	node.js node.js 설치하기 1	우론지	1,538	13년 전
3399	김태원은 작곡을 위해 남에 노래를 듣지 않는다고 합니다. 11	바보천사	787	13년 전
15224	PHP php에서 chmod 로 퍼미션 변경시 에러나는 이유 1	미운오리스키	2,033	13년 전
15217	PHP 정규식 파싱보다 쉬운 jquery 파싱 ^^ 6	K찰스	2,040	13년 전
15195	jQuery jquery 기본 예제 21	유창화	2,994	13년 전
15193	PHP Sendmail 로그분석 스팸 탐지 관련 삽질 1	켈리얀	1,091	13년 전
3373	혹시 플래시 어도비에서 지원하지 않는다는 뉴스기사 25	SGFlash	1,280	13년 전
3360	프로그래머 학생.. 12	케파서버	795	13년 전
15188	PHP 이미지주소 인코딩으로 페이지로딩시간 절약하기 4	선택이란	888	13년 전
29852	기타 div 레이아웃 잡기! 17	코코남편	2,104	13년 전
15181	JavaScript 윈도우 서버 사용자 - ddos 6	코코남편	898	13년 전
15159	PHP 유용한 함수 file_exists 21	유창화	2,371	13년 전
3350	안녕하세요~ 아이디어좀 요청부탁드립니다. 9	초딩님	609	13년 전
15158	기타 [RTSP, Darwin Streaming Server 구축]	visualp	3,485	13년 전
15157	기타 The JSON Validator	visualp	707	13년 전
15152	node.js nodejs, npm 설치시 오류 해결 4	명랑폐인	2,064	13년 전
15150	JavaScript Bing 번역 API 1	미사카10777호	3,448	13년 전
3334	웹브라우져별... 15	senseme	754	13년 전
15144	PHP 마우스 오른쪽 매뉴활성화 막는 방법입니다 jquery 5	K찰스	938	13년 전
15140	PHP 파일 하나로 끝내는 DB 관리 'Adminer' 3	웃는하루	1,297	13년 전
3331	GCJ, ACM ICPC문제가 많이 어려운건가요? 2	DreamT	788	13년 전
15136	JavaScript 익스플로러 버전별 테스트 3	onlymilk74	1,296	13년 전
29848	HTML 브라우저별 개발모드 3	K찰스	1,229	13년 전
15129	node.js nodejs 란.. [개발자게시판 펌] 6	명랑폐인	1,343	13년 전
15107	jQuery 질문해도 되나요? 21	지운아빠	1,086	13년 전
3320	안녕하세요. 신입 개발자입니다. 10	CrazySnoopy	715	13년 전
15106	PHP 프로그램 실행 메모리 체크 memtrack	선택이란	1,191	13년 전
15095	PHP 유용한 함수 call_user_func 10	유창화	1,163	13년 전
29847	JavaScript Http Live Stream 에 관하여	visualp	1,038	13년 전
15094	PHP PHP ANOTATION , Reflection	visualp	601	13년 전
3314	URL에 직접쳐서 자바스크립트 제어 관련 문의 드려요. 5	Sunys	578	13년 전
15091	jQuery jQuery Mobile Event API 2	techer	922	13년 전
15089	node.js 저도 끼어도 되나요? 1	케파서버	486	13년 전
29834	JavaScript img 자체에서 이미지 없을때 안보이게 하기 12	포그난	3,053	13년 전
15088	node.js 앗 이게 뭔일이래요..^^	명랑폐인	570	13년 전
3303	md5 디코더 만들면 불법이될까요? 10	소셜포탈	930	13년 전
15085	node.js 명랑폐인님 얼른 오세요. 2	유창화	579	13년 전
15084	PHP csv 파일 phpadmin 이용하여 업로드 하기 예시_왕초보	WEBUS	610	13년 전
26091	기타 도메인 작명(선정)방법입니다. 1	WEBUS	1,845	13년 전
15083	MySQL Got error 127 from table handler 에러 처리	WEBUS	899	13년 전
15073	PHP 유용한 함수 array_filter 9	유창화	1,381	13년 전
15071	PHP Node.js v0.2.6 번역 매뉴얼 이네요! 1	켈리얀	637	13년 전
3290	내 사이트의 컨텐츠를 iframe으로 뽀려가는놈 --; 12	진호군	1,272	13년 전
24301	기획의 비용... 26	포그난	1,758	13년 전
15067	JavaScript js css 최적화 압축 3	K찰스	790	13년 전
3285	php소스 암호화를 할려고 합니다. 4	거친들판	1,311	13년 전
3270	[개발자] 분들 실력이 어떻게 되나요? 14	visualp	806	13년 전
15064	기타 리퍼러 체크의 올바른 방법 2	선택이란	1,170	13년 전
29829	기타 이미지맵 만들어주는 프로그램 4	켈리얀	2,596	13년 전
15062	JavaScript cron을 사용할 수 없으니 이런 방법도.. 1	균이	650	13년 전
15053	jQuery jquery 스크롤바 8	onlymilk74	4,776	13년 전
3261	싸이트 문의... 8	다프린	666	13년 전
3252	프로그래머와 일할 때 알아야 할 것 ! 8	바보천사	856	13년 전
3249	프로그래머 3년차입니다. 2	톰소여	699	13년 전
15050	PHP 경매 남은 시간 구하기 PHP와 자바스크립트 소스 2	켈리얀	3,386	13년 전
3243	어제너무 두서없이 글을써서 다시정리 해봤습니다,., 5	리발련	497	13년 전
15046	기타 node.js 한글 번역 메뉴얼이 있네요 3	스숑하우	831	13년 전
24291	전문 기획하시는분 조언좀 듣고싶습니다. 9	톰소여	1,131	13년 전
24278	웹페이지 제작가능하신 동업자를 찾습니다. 12	채팀장	1,132	13년 전
3231	후아.. 눈팅족이지만 하소연좀해보렵니다, 11	리발련	620	13년 전
15042	Linux sendmail 이 느려진 경우 3	관리자	1,223	13년 전
24275	밑에 글쓰신 벤지님의 글에 댓글을 달다가 생각이 난건데요 2	블루베어	712	13년 전
3225	CSS 위치 질문 5	싱하형	597	13년 전
26075	계약서 제가 쓰는 프로그램 개발 계약서 인데 도움이 될런지요.. 15	쉽다zzz	2,251	13년 전
15041	JavaScript MVC model 로 구축해보자	선택이란	944	13년 전
3222	인터넷 기사 랜덤으로 뛰우기? 2	톰소여	570	13년 전
3218	투자자을 찾으려면 어떻게 해야 하는지 ..... 3	벤지	568	13년 전
15025	Flash 부드러운 슬라이드 만들기 15	선택이란	1,603	13년 전
15024	기타 셀렉트 태그 자동생성	남바완	748	13년 전
15018	JavaScript 리눅스에서 오라클 10g설치 때 5	선택이란	1,155	13년 전
29821	HTML 유용한 함수 get_included_files 7	유창화	1,149	13년 전
15015	jQuery 테이블 드래그.. 2	미운오리스키	1,756	13년 전
15013	Flash [visual C#] 어플 제작중 Application에서 html 페이지를 보여줄 경우 close되는 시점잡기 1	visualp	1,834	13년 전
15012	JavaScript c# , Application 제작시 유용하게 사용 할 수 있는 에디터	visualp	1,107	13년 전
3210	자바스크립트 참조 방법?? 7	다프린	764	13년 전
3200	버리고 다시 만들기로 했습니다. 9	바보천사	703	13년 전
3198	서버호스팅 사업을 하기위한 사이트 구축 1	늘새롬	946	13년 전
24274	서버호스팅 사업을 하기위한 사이트 구축솔루션	늘새롬	1,104	13년 전
15005	jQuery jQuery each 거꾸로 반환하기 6	관리자	2,511	13년 전
3188	맥쓰시는 개발자님께 에디터질문.. 9	샤이니아	568	13년 전
15001	JavaScript 사이트를 브라우저별로 테스트 해주는 사이트. 3	켈리얀	886	13년 전

이전 다음

39 40 41 42 43

전체 목록