如何更改小盒子内容的行？

Question

我想知道如何更改文本“版本 1”、“版本 2”和“版本 3”之后的行。那些是内联的，但如果我将其更改为块或添加 br/ 标签，整个小盒子就会分成两部分，这不是预期的。还有，即使我把内容（p和图片）都放在小盒子里了，为什么不包含全部内容？

.frame{
    font-size: 50px;
    background-color: black;
    height: fit-content;
    color: gold;
    width: 1900px;
    text-align: center;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.image{
    margin-top: 30px;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 50px;
    height: 50px;

}
.box{
    background-color: transparent;
    border-radius: 40;
    font-size: 36px;
    color: gold;
    border: 6px solid white;
    width: 1800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    margin-top: 40px;
    padding: 20px;
}
#timeline{ margin-top: 30px;
    color: white;
}

p{font-size: 22px;
    color: white;
    margin-bottom: 20px;
    border-color: white;
    text-align: center;
    display: inline-block;
}

.smallbox{
    background-color: transparent;
    border: 4px solid white;
    display: inline-block;
    border-radius: 20px;
    padding: 30px;
    width: 270px;
    height: 80px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>subimage</title>
    <link rel="stylesheet" type="text/css" href="../css/st.css">
</head>
<body>
    <div class="frame"> Project Directory
        <div class="box">Repository
            <div><img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
            <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
            <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg"></div>
            <div id="timeline">------O--------------------O--------------------O------</div>
            <div class="smallbox">
                <p class="v1">version 1</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png"></div>
            <div class="smallbox">
                <p class="v2">version 2</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                </div>
            <div class="smallbox">
                <p class="v3">version 3</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                    <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg">
                </div>
        </div>
    </div>
</body>
</html>>

Answer 1

使 <p> 显示为 block，删除 <p> 及其旁边图像的边距。

.frame{
    font-size: 50px;
    background-color: black;
    height: fit-content;
    color: gold;
    width: 1900px;
    text-align: center;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.image{
    /*margin-top: 30px;*/  /* removed */
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 50px;
    height: 50px;

}
.box{
    background-color: transparent;
    border-radius: 40;
    font-size: 36px;
    color: gold;
    border: 6px solid white;
    width: 1800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    margin-top: 40px;
    padding: 20px;
}
#timeline{ margin-top: 30px;
    color: white;
}

p{font-size: 22px;
    color: white;
    margin-bottom: 20px;
    border-color: white;
    text-align: center;
    display: block; /* changed */
    margin: 0; /* added */
}

.smallbox{
    background-color: transparent;
    border: 4px solid white;
    display: inline-block;
    border-radius: 20px;
    padding: 30px;
    width: 270px;
    height: 80px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>subimage</title>
    <link rel="stylesheet" type="text/css" href="../css/st.css">
</head>
<body>
    <div class="frame"> Project Directory
        <div class="box">Repository
            <div><img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
            <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
            <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg"></div>
            <div id="timeline">------O--------------------O--------------------O------</div>
            <div class="smallbox">
                <p class="v1">version 1</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png"></div>
            <div class="smallbox">
                <p class="v2">version 2</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                </div>
            <div class="smallbox">
                <p class="v3">version 3</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                    <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg">
                </div>
        </div>
    </div>
</body>
</html>>

如何更改小盒子内容的行？

How can I change the line of the contents of the small box?

html

css

line