html中元素之间的间距

我在一个角度应用程序中工作。我的html组件中有以下代码。 代码如下：

<div class="container">
    <div class="pt-4">
        <label class="screen-title">  
          <img class="mr-2" src="./assets/images/icons/complete.svg">
           Title
    </label>
    </div>
    <div class="row pt-5">
        <div class="col-6">
            <div class="row">
                <div class="col-1"><img src="./assets/images/image.svg" class="mr-1"></div>
                <div class="col-11">
                    Description
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-1"><img src="./assets/images/image.svg" class="mr-1"></div>
                <div class="col-11">
                     message
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-12">
                    <button>Start</button>
                </div>
            </div>
        </div>
        <div class="col-5">
            <div class="row">
                <button class="btn-common btn-finished">Button1</button>
            </div>
            <div class="row pt-3">
                <button class="btn-common btn-extra-key">Button-2</button>
            </div>
            <div class="row pt-3">
                <button class="btn-common btn-another-room text-center" >Button-3</button>
            </div>
        </div>
    </div>
    <div class="row pt-5">
        <label  pt-5">Message         
        </label>
        <div>
            <img src="./assets/images/image1.svg">
        </div>
    </div>
</div>

.container{
 width: 95%;
    height: 50vh;
    background-color: white;
    margin: 0;
    position: absolute;
    display: flex;
    display: ms-flexbox;
    align-items: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

我在这方面面临两个问题。详情如下：

<div class="container">
    <div class="pt-4">
        <label class="screen-title">  
          <img class="mr-2" src="./assets/images/icons/complete.svg">
           Title
    </label>
    </div>
    <div class="row pt-5">
        <div class="col-6">
            <div class="row">
                <div class="col-1"><img src="./assets/images/image.svg" class="mr-1"></div>
                <div class="col-11">
                    Description
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-1"><img src="./assets/images/image.svg" class="mr-1"></div>
                <div class="col-11">
                     message
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-12">
                    <button>Start</button>
                </div>
            </div>
        </div>
        <div class="col-5">
            <div class="row">
                <button class="btn-common btn-finished">Button1</button>
            </div>
            <div class="row pt-3">
                <button class="btn-common btn-extra-key">Button-2</button>
            </div>
            <div class="row pt-3">
                <button class="btn-common btn-another-room text-center" >Button-3</button>
            </div>
        </div>
    </div>
    <div class="row pt-5">
        <label  pt-5">Message         
        </label>
        <div>
            <img src="./assets/images/image1.svg">
        </div>
    </div>
</div>

.container{
 width: 95%;
    height: 50vh;
    background-color: white;
    margin: 0;
    position: absolute;
    display: flex;
    display: ms-flexbox;
    align-items: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

容器中的1 image.svg位于容器的最左侧。我只需要从左边留出一点空间，然后我想要image.svg.image可以是类似于tickmark的任何东西 最后，消息的中间应该有image.svg。但它是在页面中随机出现的

我试着用一些边距和填充物，但没有成功。若我尝试使用一些空白，那个么填充，但离开容器，页面就会变得凌乱

---

如何纠正它？

当您使用flex时，您可以使用

justify-content: space-between;

在同一容器中的元素之间添加空间

请看flex。

首先，您需要查看第41行的代码。

---

有关基本HTML实践的信息，请参阅。此外，您还可以参考适当的样式设置程序以获得帮助，从而解决对齐/间距问题。

我只是举了一个例子，无法在此处发布实际代码。我想我在编辑时输入了一些错误。这是您当前的输出吗？：嘿，我的问题解决了。你能删除你的答案吗？嘿，我的问题解决了。你能删除你的答案吗。