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>

​

我比较喜欢的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。但它出现在page中的随机位置。

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

怎样才能纠正它？

Answer 1

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

justify-content: space-between;

若要在同一容器中的元素之间添加间距，请执行以下操作。

那么看看flex吧。

Answer 2

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

​

参考this获取有关基本超文本标记语言实践的信息。此外，您还可以参考this获取有关适当样式设置过程的帮助，以便修复对齐/间距问题。