[CSS] margin, padding 개념 & 사용법 정리

728x90

margin, padding은 다은과 같은 속성을 가집니다.

margin : 바깥쪽 여백

padding : 안쪽 여백

기본소스코드

<!--HTML-->
<body class="container">

    <div class="ma">
        <p>1번 컨테이너</p>
    </div>
</body>

/*CSS*/
.container {
	flex-direction: row;
    margin-top: 50px;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
    border: 2px solid #333333;
} 

div.ma {
    width: 150px;
    height: 150px;
    border: 2px solid #071de2;
}

사용법

사용법은 margin과 padding 동일합니다.

margin 중점으로 설명하겠습니다.

1. 속성 4개 사용

순서대로 위, 오른쪽, 아래, 왼쪽 값을 가집니다.

div.ma {
    width: 150px;
    height: 150px;
    border: 2px solid #071de2;
    
    margin: 100px 50px 100px 50px;
}

2. 속성 2개 사용

값을 2개만 입력할 경우에는 첫번째 값은 위와 아래, 두번째 값은 오른쪽과 왼쪽 여백을 의미합니다.

동일한 결과를 보여줍니다.

div.ma {
    width: 150px;
    height: 150px;
    border: 2px solid #071de2;
    margin: 100px 50px;
}

3. 속성 한개사용

만약 속성값을 하나만 쓰면 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 됩니다.

4. padding 속성 한개사용

padding을 사용한 경우 안쪽여백이 변경된 것을 볼 수 있습니다.

div.ma {
    width: 150px;
    height: 150px;
    border: 2px solid #071de2;
    margin: 100px;
    padding: 20px;
}

5. 단일 속성 부여방법

위, 오른쪽, 아래, 왼쪽 중 하나에만 값을 부여하고 싶다면 다음과 같이 방향이 붙은 속성을 사용하면 됩니다.

margin-top: xx;
margin-right: xx;
margin-bottom: xx;
margin-left: xx;
padding-top: xx;
padding-right: xx;
padding-bottom: xx;
padding-left: xx;

6. 가운데 정렬

auto는 중앙에 배치되고 자연스럽게 좌우 여백은 균등하게 배분됩니다.

div.ma {
    width: 150px;
    height: 150px;
    border: 2px solid #071de2;
    margin: 100px auto;   
}

그리드형

저작자표시

'IT > HTML & CSS & JavaScript' 카테고리의 다른 글

[CSS] 애니메이션 / 움직이는 강아지 (0)	2021.09.17
[CSS] 하트 만들기(div, before, after) (0)	2021.09.17
[CSS] 마우스 hover / 이미지 확대 2가지 방법 (1)	2021.09.17
[CSS] 가상요소(before), 가상클래스(hover) 사용법 (0)	2021.09.16
[CSS] !important - 속성값 우선 적용방법 (0)	2021.09.16