태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

margin CSS 스타일

13년 전

margin 스타일관련

[margin] [margin-top] [margin-right] [margin-bottom] [margin-left]

margin

[margin 정의]
object의 여백을 설정 합니다. top, right, bottom, left 순서로 여백이 적용 되며 모든 값을 한번에 적용 할 수 있습니다.

숫자 단위로도 여백을 설정 할 수 있습니다.
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
전체 여백이 같다면 한번만 사용 합니다.
예: {margin: 1px} top, right, bottom, left 모두 적용

상하 여백이 같고 좌우 여백이 같다면 두번 사용 합니다.
예: {margin: 1px 2px;} top, bottom (1px) / left, right (2px)

서로 마주 보는 곳의 값이 동일 하면 먼저 값이 상하 나중 값이 좌우
좌우 여백만 같다면 세번 사용 합니다.
예: {margin: 1px 2px 3px} top (1px) / left, right (2px) / bottom (3px)

먼저 쓰인 값이 상 중간 값이 좌우 나중 값이 하
모두 값이 다르면 네번 사용 합니다.
예: {margin: 1px 2px 3px 4px} 적용 되는 순서는 top, right, bottom, left
top으로 부터 시계 방향으로 적용 됩니다

[속기법]
{margin : 5px;} top, right, bottom, left 4방향 모두 5px;일경우
{margin : 5px 10px;} top과 bottom은 5px; right와 left는 10px;일 경우
{margin : 5px 10px 15px;} top은 5px; left와 right는 10px; bottom은 15px일 경우
{margin : 5px 10px 15px 20px;} top은 5px; right는 10px; bottom은 15px; left는 20px;일 경우

[한방향만 적용할때 사용법]
#wrap {margin-top: 5px;} 위쪽만 마진적용
#wrap {margin-right: 5px;} 오른쪽만 마진적용
#wrap {margin-bottom: 5px;} 아래쪽만 마진적용
#wrap {margin-left: 5px;} 왼쪽만 마진적용

[중요팁]
브라우저에 두 개의 블록 엘리먼트 위, 아래로 겹쳐 놓을 경우두개의 마진중 더 큰 것으로 합쳐집니다.
예를 들어 위에 엘리먼트의 아래쪽 마진이 10px이고 아래쪽 엘리먼트의 위쪽 마진이 20px경우,
두 마진은 합쳐져서 큰 값이 20px이 됩니다.

　

Property	Description	Values	CSS
margin	하나의 선언에서 여백 속성을 설정하기위한 속성을 속기	margin-top margin-right margin-bottom margin-left	1
margin-bottom	집합 요소의 아래쪽 여백	auto length %	1
margin-left	집합 요소의 왼쪽 여백	auto length %	1
margin-right	집합 요소의 오른쪽 여백	auto length %	1
margin-top	집합 요소의 위쪽 여백	auto length %	1

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
/*전체 여백이 같다면 한번만 사용*/
#wrap {margin:25px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
/*모두 값이 다르면 네번 사용*/
#wrap {margin:25px 50px 75px 100px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
/*상하 여백이 같고 좌우 여백이 같다면 두번 사용*/
#wrap {margin:25px 100px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
/*좌우 여백만 같다면 세번 사용*/
#wrap {margin:25px 50px 75px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
/*top, right, bottom, left 각각 사용하기*/
#wrap {
margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

margin-top

[margin-top]
object 또는 문단 경계로 부터 위쪽 여백을 설정 합니다

숫자 단위로도 여백을 설정 할 수 있습니다.
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
퍼센트(%) : 브라우저 높이를 기준으로 비례적으로 여백 설정(상위 문단이 존재시 그 높이를 기준)

　

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
#wrap {margin-top : 25px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

margin-right

[margin-right]
object 또는 문단 경계로 부터 오른쪽 여백을 설정 합니다.

숫자 단위로도 여백을 설정 할 수 있습니다.
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
퍼센트(%) : 브라우저 너비를 기준으로 비례적으로 여백 설정(상위 문단이 존재시 그 너비를 기준)

　

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
#wrap {margin-right : 25px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

margin-bottom

[margin-bottom]
object 또는 문단 경계로 부터 아래쪽 여백을 설정 합니다.

숫자 단위로도 여백을 설정 할 수 있습니다.
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
퍼센트(%) : 브라우저 높이를 기준으로 비례적으로 여백 설정(상위 문단이 존재시 그 높이를 기준)

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
#wrap {margin-bottom : 25px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>

margin-left

[margin-left]
object 또는 문단 경계로 부터 왼쪽 여백을 설정 합니다.

숫자 단위로도 여백을 설정 할 수 있습니다.
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
퍼센트(%) : 브라우저 너비를 기준으로 비례적으로 여백 설정(상위 문단이 존재시 그 너비를 기준)

[사용예]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 블로그 (http://blog.naver.com/cj3200)</title>
<style type="text/css">
#wrap {margin-left : 25px;}
</style>
</head>
<body>
<div id="wrap">내용</div>
</body>
</html>