홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
margin CSS 스타일
12년 전
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>
 
추천추천 : 224 추천 목록
번호 제목
3,033
 PHP 정규식 정리
3,032
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
3,031
 php 크롤링 또는 파싱 함수, 정규식 모음
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.