[HTML] margin과 padding을 css에서 사용하는 방법은?

홈페이지 개발 시, 화면 영역 크기를 제한하려고 한다.

제한하지 않으면, 아래 이미지와 같이 화면 창 끝과 끝까지 텍스트가 길어져 보기 좋지 않다.

그래서, 대부분의 홈페이지들은 중앙에 내용을 위치하며, 너비의 제한을 둔다.

컨텐츠 화면을 중앙으로 배치하는 방법.. margin : 0 auto;

지금 작성중인 티스토리 글쓰기 화면도 마찮가지다.

어떻게하면, 컨텐츠를 중앙으로 옮길 수 있을까?

간단하다. 하지만 모르면 어렵다.

중앙으로 이동하고자하는 div태그에 다음과 같이 style 속성을  추가해주면 된다.

<div style="width: 900px; margin: 0 auto;">

width는 당연하겠지만, 너비다. 900px만 사용하겠다는 의미이다.

margin: 0 auto가 중요하다.

0은 위아래 마진이다. 위아래는 마진이 필요없으므로 0

auto는 좌우 마진이다. auto는 자동이므로 양옆을 균일한 값으로 마진이 발생한다.

따라서, 정중앙으로 컨텐츠 이미지가 이동하게 된다.

아래 사진을 보면 하단이 적용한 텍스트이다. 보기 더욱 깔끔해졌다.

margin을 쓸때는 

상 하 좌 우 모두 따로따로 사용할 수 있다.

margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

또는 

상하 , 좌우 를 두개로 묶어서 사용할 수 있다.

margin: 50px 20px;

아니면, 동일하게 마진(패딩)을 적용하고 싶다면, 그냥 

margin: 50px;

라고 쓰면 된다.

패딩도 똑같은 원리로 적용할 수 있다.