Get straight to the point, add vertical-align: top; We can solve it.

Here’s another question

If you use the span tag or the A tag to write a button, you’ll find that you’re writing a lot of stuff, and the width and the height are not the same as the width and the height, so you just add display: inline-block;

Or display: block;

This is because span and A are inline labels and cannot be set to width and height. To use, change the width and height to the block-level label setting.

Question 2

After inline-block is used, a blank space appears below the label. Use vertical-align: bottom; That’s it.

The sample reading

In a block, there are two inline-blocks, let’s say the block is 1300px wide, then an inline-block is 300px wide and an inline-block is 1000px wide, placed in the same row, the height will be different. Vertical-align: top; To solve the problem

.big_img {
    width: 300px;
    height: 600px;
    display: inline-block;
}
.big_img img {
    width: 300px;
    height: 600px;
}

.small_img {
    width: 1026px;
    height: 600px;
    display: inline-block;
    font-size: 0;
    
}
.small_img ul{
    width: 100%;
    height: 100%;
}

.small_img li {
    display: inline-block;
    background-color: white;
    width: 240px;
    height: 290px;
    margin-left: 16px;
    margin-bottom: 20px;
}
.small_img li img{
    background-color: white;
    width: 150px;
    height: 150px;
    display: block;
    margin: auto;
}

.small_img li p {
    font-size: 20px;
    text-align: center;

}

.small_img li p span {
    text-decoration: line-through;
    color: #b0b0b0;
}

<div class="big_img">
    <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90"
         alt="">
</div>
<div class="small_img">
    <ul>
        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>
        </li>
        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8909080ddb0851af0b87530e2927844f.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Redmi Note 10 5G</p>
            <p>5G Small King Kong | flagship long life</p>
            <p>1599<span>1699 yuan</span></p>

        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dc32ec73299ff79556dcd1cf0f0ac11.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>

        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>

        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>

        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>

        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b7fbb6fe07907c60f08358adab5adfe.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>

        <li>

            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d47f7ecaa04d92bf2790d4a5d53d9099.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>Tianji 1100 annual flagship core</p>
            <p>1599<span>1699 yuan</span></p>
    </ul>
</div>
Copy the code

The effect is as follows:

Vertical-align: top;

.small_img {
    width: 1026px;
    height: 600px;
    display: inline-block;
    font-size: 0;
    vertical-align: top;
}
Copy the code