안쪽 여백, 바깥쪽 여백 - padding, margin

이번에는 박스 모델의 여백인 마진과 패딩을 조절해보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다.

margin 속성 - 요소 주변 여백 설정하기

마진(margin)은 현재 요소 주변의 여백입니다. 따라서 마진을 이용하면 한 요소와 다른 요소사이의 간격을 조절할 수 있습니다.

마진 속성은 다음과 같습니다. 나열한 순서대로 요쇼의 바깥 위쪽, 오른쪽, 아래쪽, 왼쪽 마진을 설정할 수 있습니다.

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

margin 속성을 사용해 네 가지 속성을 한꺼번에 지정할 수 있습니다.

margin : value;

value 값에는 크기나 백분율 등으로 지정할 수 있습니다.

패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다. 다시 말해 테두리 안쪽의 여백이라고 생각하면 됩니다.

마진 속성은 다음과 같습니다. 나열한 순서대로 요쇼의 안에서 위쪽, 오른쪽, 아래쪽, 왼쪽 패딩을 설정할 수 있습니다.

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

padding 속성도 사용해 네 가지 속성을 한꺼번에 지정할 수 있습니다.

padding : value;

margin 속성과 padding 속성은 사용법이 비슷합니다. 아래에서 예시와 함께 알아보겠습니다.

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

padding : 상 우 하 좌;
margin : 상 우 하 좌;

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

padding: 10px;
padding: 10px 10px 10px 10px;
          상   우   하   좌

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

padding: 10px 20px;
         상하  좌우
padding: 10px 20px 10px 20px;
          상   우   하   좌

속성값을 세 개 쓰면 두번째 값을 오른쪽과 왼쪽 여백으로 사용합니다.

padding: 10px 20px 30px;
          상  좌우  하
padding: 10px 20px 30px 20px
          상   우   하   좌

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

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.