음수 Margin 을 이용하여 간격없애기

음수 Margin 을 이용하여 간격 없애기

CSS 에서 대부분의 치수는 양수 값이어야한다. 결과적으로 -20px 크기의 텍스트라는게 어떻게 보이겠는가? 그리고 Padding 값도 양수 값이 되어야 한다. 그러나 여러가지 창의적인 기법을 위해 음수 Margin 을 사용하는 것은 허용된다. 그러므로 텍스트 단락을 제목에 겹치게 할수 있고, 그것을 포함하고 있는 엘리먼트(사이드 바 또는 다른 레이아웃 <div>)로 밀어낼수있으며, 혹은 브라우저 창의 가장자리를 벗어나서 안보이게 할수도 있다. 게다가 음수 margin 을 유용하게 이용할 수도 있다.

두 제목 사이의 margin 을 0으로 지정하더라도, 제목 텍스트 사이에는 약간의 공간이 있다. 너무 몰려있거나 붙어있는 문장을 읽기는 어렵기 때문에, 일반적으로 이것은 장점이 된다. 그러나 두 제목들 사이의 공간을 없애고 바짝 붙이는데에 음수 margin 을 사용하는 경우 약간 흥미로운 결과가 발생할 수도 있다.

음수 margin 을 사용하여 음수 padding 을 흉내낼수도 있다. 아래의 그림의 " buck up Comatose, Raise your hand up" 텍스트 바로 밑에 라인이 한 줄있다. 이 라인은 사실상 그 다음에 있는 단락의 위 테두리다. 그러나 그 단락이 음수의 상단 margin 을 가지기 때문에, 테두리는 위에 있는 제목 밑으로 가게 된다. 제목에 있는 글자 "y" 의 아래로 내려온 꼬리가 테두리 밑에 어떻게 걸쳐져 있는지 자세히 보자. 내용과 테두리 사이의 공간, 즉 padding 은 음수가 될수 없기 때문에 텍스트라던가 다른 어떤 내용 위에 하단 테두리를 위로 이동시킬수 없다. 그러나 뒤에 나오는 엘리먼트에 border 를 적용하고 음수 margin 을 사용하여 그 엘리먼트를 위로 올림으로써 동일한 효과를 얻을수 있다.