動画内で「幅と高さはそこに含まれる画像のものにしたいので、display: inline-block;」と説明されていますが、inline-blockがあることでなぜ幅と高さが設定されるのかがよくわかりません。inline-blockは、blockを横に並べるように設置するためのものではないのでしょうか？

product要素のスタイリングは、動画でも紹介されているように以下のようなコードです。

main .product{
    position: relative;
    display: inline-block;
}

試しにdisplay:inline-block;の設定を消してみたところ、ブラウザ上では次のようになりました。