"Margin 속성"의 두 판 사이의 차이
DB CAFE
(새 문서: HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰...) |
|||
| 1번째 줄: | 1번째 줄: | ||
| − | + | == [CSS] margin 속성 == | |
| + | |||
| + | == Margin과 Padding 두가지 속성 차이점 == | ||
| + | https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile21.uf.tistory.com%2Fimage%2F995AC64C5B2B087A34EA3B | ||
| − | + | Margin은 Object와 화면과의 여백(외부여백) | |
| + | Padding은 Object내의 내부여백 | ||
| − | + | === 예제 === | |
| + | <source lang=html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<!DOCTYPE> | <!DOCTYPE> | ||
<html> | <html> | ||
| 51번째 줄: | 51번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </source> | ||
| + | |||
출력 결과 | 출력 결과 | ||
빨간색 : 설정 없음 | 빨간색 : 설정 없음 | ||
녹색 : 마진 10px(위,아래,좌,우) | 녹색 : 마진 10px(위,아래,좌,우) | ||
| − | |||
파란색 : 패딩 10px(위,아래,좌,우) | 파란색 : 패딩 10px(위,아래,좌,우) | ||
| − | |||
노란색 : 마진, 패딩 10px(위,아래,좌,우) | 노란색 : 마진, 패딩 10px(위,아래,좌,우) | ||
예제1결과 | 예제1결과 | ||
| − | 보시는것 처럼 Margin과 Padding속성을 설정하면 위,아래,좌,우에 모두 Margin과 Padding이 적용됩니다. 하지만 위쪽 Margin만 주고싶거나 아래쪽 Padding만 주고싶은 경우도 생각해보지 않을 수 없겠죠? | + | 보시는것 처럼 Margin과 Padding속성을 설정하면 위,아래,좌,우에 모두 Margin과 Padding이 적용됩니다. |
| + | 하지만 위쪽 Margin만 주고싶거나 아래쪽 Padding만 주고싶은 경우도 생각해보지 않을 수 없겠죠? | ||
일부분적용법 | 일부분적용법 | ||
| − | |||
한 방향에만 Margin이나 Padding을 설정해주고 싶은경우에는 margin-방향 padding-방향 이라고 설정해주면 됩니다. | 한 방향에만 Margin이나 Padding을 설정해주고 싶은경우에는 margin-방향 padding-방향 이라고 설정해주면 됩니다. | ||
| − | |||
| − | |||
예제 | 예제 | ||
2019년 12월 24일 (화) 14:24 판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
1 [CSS] margin 속성[편집]
2 Margin과 Padding 두가지 속성 차이점[편집]
Margin은 Object와 화면과의 여백(외부여백) Padding은 Object내의 내부여백
2.1 예제[편집]
<!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(위,아래,좌,우)
예제1결과
보시는것 처럼 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>
100*100
margin-left
margin-left
100*100
padding-top
padding-top
</body> </html> 출력 결과 녹색 : 왼쪽마진 10px
파란색 : 위쪽패딩 10px