30분경 article 사이의 공백에 대하여

인라인 블록으로 변경이 되면 우측에 여백이 생깁니다. 그건 폰트관련 사항입니다.

이미지의 경우 우측과 아래쪽에 그런 여백이 생깁니다.

이미지의 경우 없애려면 이미지를 블록 요소로 변경하면 깔끔하게 없어 집니다.

위의 경우 article을 인라인 블록으로 주었을 경우 없애는 방법은 폰트사이즈를 조정하는 방법이 있습니다만... 좀 야매스럽습니다.

그래도 알려드리면...

아래 코드를 보시면 section article을 인라인 블록으로 해서 가로배치와 중앙 정렬을 편하게 할 수 있습니다.

그런데 우측에 생기는 여백은 article의 부모요소인 section 에 font-size: 0; 주면 없어집니다.

그리고 article에 다시 font-size: 16px; 이렇게 주면 됩니다. 좀 야매스럽죠.

<!DOCTYPE html>

<html lang="ko">

<head>

  <meta charset="UTF-8">

  <title>인라인 블록으로 변경이 되면 우측에 여백</title>

  <style>

    section {

      border: 5px solid #000;

      width: 900px;

      text-align: center;

      font-size: 0;

}

    section article {

      border: 5px solid red;

      width: 250px;

      height: 200px;

      display: inline-block;

      font-size: 16px;

}

  </style>

</head>

<body>

  <section>

    <article>article #01</article>

    <article>article #01</article>

    <article>article #01</article>

  </section>

</body>

</html>

아래처럼 플렉스를 사용하면 원하는 배치를 더 편하게 할 수 있습니다.

section {
      border: 5px solid #000;
      width: 900px;
      display: flex;
      justify-content: center;
    }
    section article {
      border: 5px solid red;
      width: 250px;
      height: 200px;
   }

인프런 커뮤니티 질문&답변