블로그에 글을 쓰다 보면 사진을 여러 장 연달아 올리게 될 때가 많죠. 그런데 사진들 사이에 원하지 않는 하얀 틈이 생겨서 보기 싫을 때가 있지 않나요? 딱 붙여서 깔끔하게 보여주고 싶은데 자꾸 벌어지는 이 여백, CSS를 조금만 만져주면 깔끔하게 해결할 수 있어요. 오늘은 마진(margin)과 패딩(padding), 그리고 잘 모르는 분들이 많은 라인 하이트(line-height)까지 활용해서 이미지 간격을 조절하는 방법을 알려드릴게요.
블로그 이미지 여백은 왜 생기는 걸까요?
사진 사이에 빈 공간이 생기는 이유는 크게 두 가지예요. 하나는 이미지 자체에 설정된 외부 여백이나 내부 여백 때문이고, 다른 하나는 이미지가 글자처럼 취급되면서 생기는 줄 간격 때문이에요. 보통은 마진과 패딩만 조절해도 해결되지만, 그래도 안 없어지는 미세한 틈은 다른 방법이 필요하답니다.
특히 이미지를 여러 장 이어 붙여서 파노라마처럼 보여주고 싶거나, 만화처럼 컷을 연결하고 싶을 때 이 여백 제거 작업이 꼭 필요해요. 어렵지 않으니 하나씩 따라 해보시면 금방 이해되실 거예요.
CSS로 기본적인 여백 조절하기
1. 바깥 공간을 없애는 MARGIN (마진)
가장 먼저 확인해야 할 건 마진(margin)이에요. 이건 요소의 테두리 바깥쪽 공간을 말하는데요. 쉽게 말해 사진과 다른 요소 사이의 거리라고 보시면 돼요. 보통 블로그 스킨에는 기본적으로 이미지에 마진 값이 들어가 있는 경우가 많아요.
이럴 때는 CSS에서 margin: 0;이라고 설정해주면 외부 여백이 싹 사라져요. 만약 상하좌우 여백을 따로 주고 싶다면 margin-top이나 margin-bottom 같은 속성을 써서 조절하면 되고요. 참고로 블록들이 위아래로 배치될 때 큰 마진 값 하나만 적용되는 ‘마진 상쇄’라는 현상이 있으니, 여백이 생각보다 넓다면 이 부분을 확인해보는 게 좋아요.
2. 안쪽 공간을 없애는 PADDING (패딩)
그다음은 패딩(padding)이에요. 이건 테두리 안쪽, 즉 내용물과 테두리 사이의 공간이에요. 이미지 박스 내부에 여백이 잡혀 있다면 이 값을 0으로 만들어줘야 해요. padding: 0;을 입력하면 내부 공간 없이 이미지가 박스에 꽉 차게 들어간답니다.
보통 .box { margin: 0; padding: 0; } 이렇게 두 개를 세트로 묶어서 0으로 초기화해주면 대부분의 굵직한 여백들은 사라지게 되어 있어요.
마진 패딩을 0으로 했는데도 여백이 남는다면?
숨겨진 범인, LINE-HEIGHT (줄 간격)
아마 이 부분에서 막히는 분들이 많을 거예요. 마진이랑 패딩을 다 없앴는데도, 이미지 아래쪽에 아주 미세하게 흰 줄이나 빈 공간이 남아있는 경우죠. 이건 이미지가 span 태그 같은 인라인(inline) 요소 안에 있을 때 주로 발생해요.
웹 브라우저는 이미지를 글자(텍스트)와 비슷하게 취급할 때가 있어요. 글자를 쓸 때 영문 소문자 g나 j처럼 줄 아래로 삐져나오는 글자를 위해 ‘베이스라인(Baseline)’이라는 공간을 남겨두거든요. 이미지가 글자 취급을 받으니, 이 베이스라인만큼의 공간이 이미지 아래에 남아서 여백처럼 보이는 거예요.
해결 방법은 간단해요
이 문제를 해결하는 가장 확실한 방법은 두 가지가 있어요. 첫 번째는 이미지를 감싸고 있는 부모 요소나 span 태그의 줄 간격을 없애버리는 거예요. CSS에 line-height: 0;을 추가하면 글자 높이가 0이 되면서 베이스라인 공간도 사라지게 되죠.
두 번째 방법은 이미지 자체를 블록 요소로 바꿔버리는 거예요. display: block; 속성을 이미지에 주면, 이미지는 더 이상 글자 취급을 받지 않고 온전한 박스 형태가 되어서 하단의 미세한 여백이 싹 사라집니다.
미세한 여백 제거 결과 확인하기
아래 이미지는 line-height 속성을 0으로 설정해서 이미지 사이의 미세한 틈을 완전히 없앤 결과예요. 사진들이 딱 붙어 있으니 훨씬 깔끔하고 몰입감이 좋아지죠?
정리하자면, 블로그 사진 사이의 여백을 없애고 싶을 때는 순서대로 이것만 기억하면 돼요. 먼저 margin: 0;과 padding: 0;으로 큰 여백을 잡고, 그래도 남는 미세한 틈은 line-height: 0;이나 display: block;으로 마무리하는 거죠. 이 팁을 활용해서 블로그를 더 예쁘게 꾸며보시길 바랄게요.
