CSS margin, padding 차이점 및 HTML 태그 간격 및 여백, 정렬 등 크기 조절 사용법
margin 속성 사용법
magin 속성은 HTML 요소의 맨 마지막 단계의 여백으로 콘텐츠와 콘텐츠 간의 간격을 의미합니다.
margin 속성을 이용해 HTML 태그 간의 간격 및 여백을 지정할 수 있으며 HTML 문서 디스플레이 구성에 중요한 역할을 하는 속성입니다.
margin 속성값
속성값 | 설명 |
크기(px, em) | 직접적으로 margin 속성의 크기를 px 및 em 단위로 입력해서 지정 |
백분율 | 퍼센트 값을 지정할 경우 자기 자신의 부모요소의 크기를 기준으로 크기가 지정되게 됩니다. |
auto | display 속성 값에 따라 적절한 크기로 자동 지정됩니다. |
HTML 문서 가독성을 위한 전체 페이지 가운데 정렬 시키기
HTML 문서는 기본적으로 좌측 정렬이 됩니다. 요즘에는 HTML 문서의 가독성을 위해 가운데 정렬하는 경우가 많은데요. 이때 margin 속성을 사용해 HTML 문서 전체의 가운데 정렬할 수 있습니다.
아래의 예제에서는 전체 문서의 위, 아랫부분의 여백을 15px 간격을 띄우고, 가운데 정렬 시킬 수 있습니다.
- body 태그 하위에 전체 문서의 최상위 시맨틱 태그 or div 태그 선언
- 선언된 최상위 태그의 너비(width)를 지정.
- margin 속성값의 좌우에 해당하는 값을 auto로 지정.
<style>
main {
width : 768px;
margin : 15px auto;
background-color: #32877b;
color: white;
}
</style>
</head>
<body>
<main>
<h1>margin 속성 이용 HTML 문서 전체 가운데 정렬 예제</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ratione delectus odio laborum sunt sint dolor quo qui, dolorem incidunt perspiciatis saepe aliquid possimus sapiente dicta vel voluptas id ab!</p>
</main>
</body>
 |
| body 태그 밑에 최상위 태그를 지정해서 margin 속성값을 넣어주면 문서를 가운데 정렬할 수 있습니다. |
HTML 요소 간 오버랩 된 마진 값 처리 방식
top, bottom에 지정된 HTML 요소 간 겹치는 구간이 발생할 경우 각각의 margin 값이 더해져서 간격을 벌이는 것이 아닌 margin 속성값이 큰쪽의 값만 적용된다는 점에 유의해야 합니다.
이렇게 처리되는데는 이유가 있는데, 문서상에 최상단과 최하단의 여백을 제외한 가운데 개체들간의 간격이 과하게 벌어지는 것을 방지하기 위한 것으로 위, 아래의 margin 값은 둘 중 큰 값만 적용됩니다. 이렇게 처리되는 로직은 오직 위, 아래에서 겹치는 부분에만 발생하고 margin의 좌, 우 여백에는 해당되지 않습니다.
 |
| top, bottom의 margin이 겹치는 경우 같은 값의 경우 한번만 반영되고 다른 경우 큰값이 적용 |
padding 속성 사용법
padding 속성은 HTML 태그와 테두리 사이의 공백을 말하는데, 테두리가 없는 경우에도 지정한 만큼 자리를 자치하게 됩니다.
padding 값을 크게 지정할수록 HTML 요소와 테두리 사이의 간격이 넓어져 결국 콘텐츠가 차지하는 크기가 커지게 됩니다.
<style>
main {
width : 768px;
margin : 15px auto;
box-sizing: border-box;
}
h2 {
border : 1px solid black;
width : 200px;
text-align: center;
}
#box2 {
padding : 20px;
}
#box3 {
padding : 20px 40px;
}
</style>
</head>
<body>
<main>
<h1>padding 값에 따른 콘텐츠 배치</h1>
<h2 id="box1">padding 박스</h2>
<h2 id="box2">padding 박스</h2>
<h2 id="box3">padding 박스</h2>
</main>
</body>
 |
| padding값에 따른 HTML 콘텐츠 배치 |