다른 명령
[CSS] margin 속성
Margin과 Padding 두가지 속성 차이점
Margin은 Object와 화면과의 여백(외부여백) Padding은 Object내의 내부여백
예제
<!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-방향 이라고 설정해주면 됩니다.
예제
<!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