Margin 속성 - DB CAFE

1 [CSS] margin 속성[편집]

2 Margin과 Padding 두가지 속성 차이점[편집]

https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile21.uf.tistory.com%2Fimage%2F995AC64C5B2B087A34EA3B

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-방향 이라고 설정해주면 됩니다.

예제

<!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