블로그 글 작성시 이미지를 미세 여백 삭제하기 [ 이미지 여백 삭제 ]

이미지 간 여백 없애는 CSS 팁[ margin, padding, line-height 조정방법 ]

이미지 사이 여백을 없애는 간단한 CSS 방법

블로그에 이미지를 많이 올릴 때, 이미지 사이의 자동 생성된[ 이미지 여백 ]을삭제하려면 margin과 padding 속성을 조정해야 합니다. margin은 외부 여백을, padding은 내부 여백을 조절합니다.
하지만 여백이 여전히 남아 있는 경우, span 요소의 line-height 속성을 조정하여 미세한 여백을 없앨 수 있습니다.

블로그 이미지 여백을 깔끔하게 없애는 CSS 속성 활용법

예를 들어, line-height: 0을 사용하면 span 요소의 여백을 제거할 수 있습니다. CSS 코드를 통해 여백을 원하는 대로 조정할 수 있습니다..

블로그에 글을 작성 시 이미지를 많이 사용하게 됩니다. 이미지를 사용하는 과정에서 여러 장의 개별적인 이미지를 올리다 보면 이미지와 이미지 사이에 여백이 자동으로 생성되면서 이미지를 구분할 수 있게 속성이 설정되어 있습니다.

때론 이미지를 여러 장 올리다 보면 이미지들이 여백 없이 붙여서 보여지기를 원하는 경우가 발생합니다.

그때 이미지 여백을 제거하는 방법입니다. 다른 요소들과의 여백을 조정해주는 속성으로 주로 margin과 padding 속성을 사용합니다.

이미지 여백 삭제 [ MARGIN ]

margin은 CSS에서 주로 외부 여백을 조정하는 데 사용합니다.

다른 요소들과의 외부적인 간격을 지정해서 두 요소가 너무 가깝거나 멀리 떨어진 경우 적당한 값을 넣어서 조정하시면 됩니다. margin 속성은 인접한 블록들의 마진 요소 중 큰 마진이 적용되고 작은 마진 값은 무시됩니다.

즉, 한 개의 블록만으로 마진 속성이 적용되지 않을 경우는 그에 인접한 다른 블록의 마진을 확인해야 정확히 적용할 수 있습니다.

.box {
    margin-top: 10px;    /* 상단 여백 10px */
    margin-right: 15px;  /* 오른쪽 여백 15px */
    margin-bottom: 20px; /* 하단 여백 20px */
    margin-left: 25px;   /* 왼쪽 여백 25px */
}

이미지 여백 [ PADDING ]

padding은 요소의 내용과 그 외곽의 테두리 사이의 공간을 조정할 때 사용합니다.

즉, 내부 여백이라고 보시면 될 것 같습니다. 픽셀(px), 퍼센트(%), em, rem 등 다양한 단위로 설정할 수 있습니다.

.box {
    padding-top: 10px;    /* 상단 패딩 10px */
    padding-right: 15px;  /* 오른쪽 패딩 15px */
    padding-bottom: 20px; /* 하단 패딩 20px */
    padding-left: 25px;   /* 왼쪽 패딩 25px */
}

MARGIN과 PADDING으로 대부분의 여백은 조정이 가능합니다. 그러나 이런 경우가 있습니다. 마진과 패딩을 다 적용하고 나서도 여백이 존재하는 경우가 발생합니다.

아래와 같은 코드에서 주로 발생합니다.

이미지 여백 [ line-height ]

이미지를 span 요소로 감싸고 있는 경우입니다.

이런 경우는 아주 미세하지만 span 영역만큼의 공간을 차지하기 때문에 이 부분이 여백으로 보여지는 경우가 발생합니다.

이 경우는 span에 line-height 속성을 부여해서 원하는 만큼의 여백을 조정할 수 있습니다.

아래와 같은 코드로 작성된 이미지가 있을 경우를 예시로 들어보겠습니다.

아래 코드와 같이 각 블록에 패딩과 마진 속성을 지정하고 일부 적용이 안 되는 경우는 span에 다른 속성이 있기 때문입니다. 이 속성을 원하는 값으로 강제 지정하시면 됩니다.

아래는 여백이 없게 적용한 경우입니다.

1. 이미지가 미세하게 떨어진 경우

이미지가 미세하게 떨어진 경우

2. 이미지가 서로 붙은 경우