CODING FACTORY

여백에는 안쪽여백과 바깥여백이 있습니다. 안쪽여백은 padding 속성으로, 바깥여백은 margin 속성으로 정합니다.

속성값 부여하기

padding과 margin 속성에 값을 부여하는 방법은 다음과 같습니다.

xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽 여백입니다. 간단한 예는 다음과 같습니다.

속성값의 개수는 줄일 수 있습니다. 속성값을 하나만 쓰면 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.

속성값을 두 개 쓰면 첫번째 값은 위와 아래, 두번째 값은 오른쪽과 왼쪽 여백을 의미합니다. 즉, 다음의 두 줄은 같은 의미입니다.

속성값을 세 개 쓰면 두번째 값을 오른쪽과 왼쪽 여백으로 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.

padding을 예로 들었지만 margin도 마찬가지입니다.

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

바깥여백(Margin)의 특징

margin은 padding과 비교했을 때 두가지 특징이 있습니다.

음수 가능

첫번째 특징은 속성값으로 음수를 사용할 수 있다는 것입니다. 간단한 예는 다음과 같습니다.

가운데 정렬

두번째는 속성값으로 auto를 사용할 수 있다는 것입니다. auto를 사용하면 HTML 요소를 가운데 정렬할 수 있습니다. (문단 정렬이 아니라 요소를 가운데에 위치시키는 것입니다.) 간단한 예는 다음과 같습니다.