이미지 끼리 여백없이 붙이기 위한 방법 img {display:block;}

아래 케이스 1과 2를 비교해 보면

img의 기본 display 속성이 inline일 경우는 틈이 벌어질 수 있으며,

 

이 display속성을 display로 변경하면 틈 없이 이미지가 배치된다.

 

케이스 1

케이스 2

코드 확인

1. html

    <section id="product_section">
      <article id="product_article">
        <img src="http://placehold.it/795x400" alt="">
        <img src="http://placehold.it/795x400" alt="">
        <img src="http://placehold.it/795x400" alt="">
      </article>
      <aside id="product_aside">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
        <img src="http://placehold.it/170x200" alt="">
      </aside>
    </section>

2. css

#product_section > #product_article > img{
  display: block;
}

 

참고 자료: 모던 웹 디자인을 위한 HTML5 + CSS3 입문, P.392