[Html] Margin, Padding 속성의 차이점과 사용법
- Web/HTML, CSS
- 2018. 6. 25.
HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서는 같지만. 분명 다른점도 존재합니다. 이번 포스팅에서는 Margin, Padding 속성에 대해 정확히 알아보도록 하겠습니다.
Margin과 Padding 두가지 속성의 차이점은 위 사진 하나로 충분히 설명이 가능합니다. Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다. 그럼 아래 예제를 보면 완벽히 이해할 수 있으실겁니다.
예제
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin:0;
}
div {
width:100px; height:100px;
font-weight:bold;
}
#box1 {
background-color:red;
}
#box2 {
background-color:green;
margin:10px;
}
#box3 {
background-color:blue;
padding:10px;
}
#box4 {
background-color:yellow;
margin:10px 10px 10px 10px; /* 위쪽 오른쪽 아래쪽 왼쪽 마진속성 한번에 주기 */
padding:10px 10px 10px 10px; /* 위 오른쪽 아래쪽 왼쪽 패딩속성 한번에 주기 */
}
</style>
</head>
<body>
<div id="box1"> 100*100 <br /> nomal </div>
<div id="box2"> 100*100 <br /> margin </div>
<div id="box3"> 100*100 <br /> padding </div>
<div id="box4"> 100*100 <br /> margin <br /> padding</div>
</body>
</html>
출력 결과
빨간색 : 설정 없음
녹색 : 마진 10px(위,아래,좌,우)
파란색 : 패딩 10px(위,아래,좌,우)
노란색 : 마진, 패딩 10px(위,아래,좌,우)
보시는것 처럼 Margin과 Padding속성을 설정하면 위,아래,좌,우에 모두 Margin과 Padding이 적용됩니다. 하지만 위쪽 Margin만 주고싶거나 아래쪽 Padding만 주고싶은 경우도 생각해보지 않을 수 없겠죠?
한 방향에만 Margin이나 Padding을 설정해주고 싶은경우에는 margin-방향 padding-방향 이라고 설정해주면 됩니다.
예제
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin:0;
}
div {
width:100px; height:100px;
font-weight:bold;
}
#box1 {
background-color:green;
margin-left:10px;
}
#box2 {
background-color:blue;
padding-top:10px;
}
</style>
</head>
<body>
<div id="box1"> 100*100 <br /> margin-left </div>
<div id="box2"> 100*100 <br /> padding-top </div>
</body>
</html>
출력 결과
녹색 : 왼쪽마진 10px
파란색 : 위쪽패딩 10px
[Html] UI 태그, OL태그, DI태그, LI태그 사용법
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] Span 태그 사용법 & 예제 (1) | 2018.06.27 |
|---|---|
| [Html] div 태그 사용법 & 예제 (4) | 2018.06.26 |
| [Html] pre 태그 사용법 & 예제 (0) | 2018.06.24 |
| [Html] 테이블안에 테이블 충첩하기 (2) | 2018.06.23 |