html中元素之间的间距

Question

我正在使用 Angular 应用程序。我的 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>

我的conainer css如下::

.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。（图像可以是任何像刻度线） 2) 最后的消息应该有 image.svg 就在中心的下方。但它出现在页面中的随机位置。

我尝试使用一些边距和填充，但没有得到它。如果我尝试使用一些边距，那么填充然后离开容器并且页面变得混乱。

如何改正？

Answer 1

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

justify-content: space-between;

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

所以看看 flex。

Answer 2

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

参考this 了解有关基本 HTML 实践的信息。您还可以参考this 以获取有关正确样式程序的帮助，以便您解决对齐/间距问题。