Why inline-blocks are not in the same line?

Question

So that's the markup. I have three articles in the section.

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
}
body {
  background: #F9FBFD;
}
article {
  width: 333px;
  height: 432px;
  background: #FFF;
  display: inline-block;
  /* vertical-align: top; */
}
article h3 {
  font-size: 18px;
  line-height: 22px;
  color: #393737;
}
article p {
  font-size: 15px;
  line-height: 24px;
  color: #B5B7C7;
}

<p>Our blog posts</p>
<section class="posts">
  <article>
    <img src="https://picsum.photos/200/300" alt="MSPTA">
    <h3>2021 Mid-South Parking and Transportation (MSPTA) Conference</h3>
    <p>September 21, 2021</p>
  </article>
  <article>
    <img src="https://picsum.photos/200/300" alt="PIE">
    <h3>2021 Parking Industry Expo (PIE)</h3>
    <p>September 21, 2021</p>
  </article>
  <article>
    <img src="https://picsum.photos/200/300" alt="MSPTA">
    <h3>2021 International Parking & Mobility Institute (IPMI) Conference</h3>
    <p>September 21, 2021</p>
  </article>
</section>

But nevertheless have the inline-block not in the same line. Why the second block is below?

Because the text is one line instead of two, and all your blocks are aligned to the baseline. Bring back the commented-out `vertical-align` and you'll be all set. — Daniel Beck, Oct 03 '22 at 20:04
Why did you comment out `vertical-align: top`? That's what you need. The default setting for `vertical-align` is `baseline`. — Michael Benjamin, Oct 03 '22 at 20:04

Jae · Answer 1 · 2022-10-03T20:07:48.380

The reason why inline-blocks are not in the same line is because the height of your article h3 title has different heights due to wrapping ie. 2 lines vs 1 compared to the other articles. You could uncomment the vertical-align: top; in your example, and it would fix it but i would suggest using flex for more responsiveness. I have included an example.

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
}

body {
  background: #F9FBFD;
  ;
}

section.posts {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

article {
  flex: 3;
  background: #FFF;
  display: inline-block;
  vertical-align: top; 
}

article h3 {
  font-size: 18px;
  line-height: 22px;
  color: #393737;
}

article p {
  font-size: 15px;
  line-height: 24px;
  color: #B5B7C7;
}

<body>
  <p>Our blog posts</p>
  <section class="posts">
    <article>
      <img src="https://via.placeholder.com/150x150" alt="MSPTA">
      <h3>2021 Mid-South Parking and Transportation (MSPTA) Conference</h3>
      <p>September 21, 2021</p>
    </article>
    <article>
      <img src="https://via.placeholder.com/150x150" alt="PIE">
      <h3>2021 Parking Industry Expo (PIE)</h3>
      <p>September 21, 2021</p>
    </article>
    <article>
      <img src="https://via.placeholder.com/150x150" alt="MSPTA">
      <h3>2021 International Parking & Mobility Institute (IPMI) Conference</h3>
      <p>September 21, 2021</p>
    </article>
  </section>
</body>

Why inline-blocks are not in the same line?

1 Answers1