이번에는 박스 모델의 여백인 마진과 패딩을 조절해보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다.
margin 속성 - 요소 주변 여백 설정하기
마진(margin)은 현재 요소 주변의 여백입니다. 따라서 마진을 이용하면 한 요소와
다른 요소사이의 간격을 조절할 수 있습니다.
마진 속성은 다음과 같습니다. 나열한 순서대로 요쇼의 바깥 위쪽, 오른쪽, 아래쪽,
왼쪽 마진을 설정할 수 있습니다.
margin-top: xx;
margin-right: xx;
margin-bottom: xx;
margin-left: xx;
margin 속성을 사용해 네 가지 속성을 한꺼번에 지정할 수 있습니다.
margin : value;
value 값에는 크기나 백분율 등으로 지정할 수 있습니다.
padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정하기
패딩(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도 마찬가지입니다.
예제
- 마진(margin) : 테두리 바깥 여백
- 패딩(padding) : 테두리 안쪽 여백
