How to change the position of inline-block list elements?

Question

css

Hello. I am learning how to write websites, almost at the very beginning of my journey (in view of this, I apologize for a possibly stupid question) and a problem arose, the solution of which cannot be simply googled. The task was this: create 4 cards, 2 in a row. Make at the top of each picture, below the title and a few paragraphs of description. I decided to do through the list.
At first it was like this:

Code from html:

<h1 class="modules-header">Заголовок</h1>
    <ul class="modules-block">
      <li class="modules-card intro">
          <h3>Блок 1</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
            <li>пункт 4</li>
          </ul>
      </li>
      <li class="modules-card b-html">
          <h3>Блок 2</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
            <li>пункт 4</li>
            <li>пункт 5</li>
          </ul>
      </li>
      <li class="modules-card b-css">
          <h3>Блок 3</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
            <li>пункт 4</li>
            <li>пункт 5</li>
            <li>пункт 6</li>
          </ul>
      </li>
      <li class="modules-card layout">
          <h3>Работа с макетом</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
          </ul>
      </li>
    </ul>

The list and its elements have the following properties in CSS:

.modules-block {
  margin: 0;
  list-style-type: none;
  font-size: 0;
}

.modules-card {
  display: inline-block;
  text-align: left;
  width: 572px;
  height: 505px;
  padding-top: 180px;
  background-color: #b6b6b6;
  font-size: 1rem;
  background-position: top;
  background-repeat: no-repeat;
}

And while there were only pictures in the blocks, everything was fine, but when I began to fill it with text, the blocks began to move out. Like this:

Trying to solve this problem, I tried everything that came to my mind. It was not possible to solve it, but for that I noticed that if the same amount of text is added to the blocks, then the offsets disappear. Like this:

I will not make stupid guesses, and I really want to know if there is a way to fix this (without doing the same amount of test)? Or is it basically?

Answer 1

Inline is by default aligned with the baseline of the text.
You just need to redefine it
vertical-align: top;
. But layout of grids on inline-block is archaic. Here it is quite possible to use flex + flex-wrap. And grid is better, if possible under the terms of TK.

Answer 2

I recommend studying grid , https://developer.mozilla.org/ru/docs/Web/CSS/CSS_... everything is clear here. Spend a couple of tens of minutes, but such problems will not appear in the future.

Answer 3

</li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
      <li class="modules-card layout">

Often this effect comes to light when display: inline-block is used.
The way out is to not wrap li elements (and leave no spaces), or level the size of text nodes using css.