1.2.6.5 CSS 기초 - 여백 설정

전자책을 편집할 때 여백은 다양한 목적으로 활용할 수 있다. 제목과 본문을 구분하기 위해 간격을 띄거나 인용구를 구분하기 위해 들여쓰기를 하는데 사용할 수도 있다. HTML에서는 내어쓰기 태그가 없지만 여백과 함께 text-indent를 사용하면 내어쓰기 효과를 낼 수도 있다. 상하좌우 여백을 조절해서 책의 느낌을 바꿀 수도 있고, 테두리를 그릴 때는 내용이 테두리에 달라붙지 않게 여백을 두기도 한다.

여백에 사용하는 태그는 margin과 padding이 있다. margin과 padding은 전혀 다른 속성을 갖고 있지만 이를 구분하지 않고 쓰는 경우가 많다. 

▶ margin : 테두리 바깥쪽 여백 --> margin : 30px;

▶ padding : 테두리 안쪽 여백 --> padding :30px;

HTML 태그를 써서 글을 작성하면 눈에 보이지 않는 가상의 글상자가 만들어 진다. margin은 이 글상자와 글상자 사이의 간격을 의미하고, padding은 글상자 안쪽 여백을 의미한다. 

첫번째 글상자는 바깥쪽 테두리와 안쪽 테두리 사이에 여백이 생긴 것을 볼 수 있다. 이는 안쪽 글상자의 margin이 30px 적용됐기 때문이다. 

두번째 글상자는 안쪽 글상자와 글상자 안에 있는 텍스트 사이에 여백이 30px 생겼다. 대신 바깥쪽 글상자와 안쪽 글상자 사이에 간격은 전혀 없다.(자세히 보면 파란 테두리 바깥으로 회색 점선을 볼 수 있다)

▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;

▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;

▶ padding : 테두리 안쪽 여백 --> padding :10px;

▶ padding : 테두리 안쪽 여백 --> padding :10px;

만약 문단 태그<p>에 margin과 padding으로 각각 여백을 준다면, 눈에 보이지 않더라도 저렇게 테두리가 쳐 지고, 테두리를 기준으로 margin은 테두리 바깥쪽, padding은 테두리 안쪽에 여백이 생긴다. 아래는 위 예제에서 배경색과 테두리만 없앤 결과이다. 

▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;

▶ margin : 테두리 바깥쪽 여백 --> margin : 10px;

▶ padding : 테두리 안쪽 여백 --> padding : 10px;

▶ padding : 테두리 안쪽 여백 --> padding : 10px;

테두리와 배경색을 없애면 margin과 padding이 똑같은 스타일이 적용된 것 처럼 보인다. 그래서 둘을 서로 구분하지 않고 사용하는 경우가 많은데 테두리를 그렸을 때 결과를 보면 둘은 전혀 다른 스타일임을 알 수 있다. 

margin과 padding은 상, 하, 좌, 우 여백을 구분해서 적용할 수 있다. margin, padding 속성으로 네 영역에 각각 여백을 적용할 수도 있고, margin-top, margin-right, margin-bottom, margin-left 태그로 원하는 영역에 한정해서 여백을 지정하는 태그도 있다. 

▶ margin: 10px;

     - 상, 하, 좌, 우 모두 10px씩 여백을 준다.

▶ margin : 10px 5px 10px 5px;

    - 상 10px, 우 5px, 하 10px, 좌 5px로 앞쪽부터 시계 방향으로 상, 우, 하, 좌 여백을 의미한다.

▶ margin : 10px 5px;

    - 상하 10px, 좌우 5px 여백을 준다. 

▶ margin-left : 10px;

    - 왼쪽에 10px 여백을 준다.

▶ margin : 0px 0px 0px 10px;

    - 왼쪽에 10px 여백을 준다. 

paddin도 동일한 규칙이 적용된다. 

** 참고 : 여백과 관련된 Tip : http://epubguide.net/38