요소 주변의 여백을 설정하는 속성
- margin 속성
- 요소와 요소 사이의 간격을 조절 할 수 있음
- 4개 방향에 똑같이 지정할 수 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있음
- 기본형 :
margin: <크기> | <백분율> | auto
- margin 속성값
- <크기> : 너비값이나 높이값을 px이나 em 같은 단위와 함께 수치로 지정함
- <백분율> : 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높이값을 퍼센트(%)로 지정함
- auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함
마진 속성을 사용하여 웹 문서를 가운데 정렬하기
- margin 속성을 사용하여 웹 문서의 내용을 화면 중앙에 배치하려면 배치할 요소의 너비값이 정해져 있어야 함
- margin-left와 margin-right의 속성값을 auto로 지정함
- 위와 같이 지정하면 CSS는 웹 브라우저 화면의 너비에서 요소 너비값을 뺀 나머지 영역을 좌우 마진으로 자동 계산함
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 문서 가운데 정렬하기</title>
<style>
body {
background-color:#222;
}
#container {
background-color:#fff;
width:600px;
margin:20px auto;
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>예제</h1>
<p>예시</p>
</body>
</html>-(결과) :
마진 중첩
- 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 문제가 발생하는데, 이를 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)라고 함
- 마진 중첩(또는 마진상쇄)는 아래 마진과 위 마진이 서로 만날 때 큰 마진값으로 합쳐지는 것이고, 오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않음
콘텐츠와 테두리 사이의 여백을 설정하는 속성
- padding 속성
- 패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말함
- 패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 같음
- padding 속성으로 4개 방향의 마진을 한꺼번에 지정할 수도 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어를 사용하여 특정 방향에만 지정할 수도 있음