html中元素之间的间距

Posted 2023-02-02

我正在从事有角度的应用程序。我的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下方。但是它在页面中的随机位置出现。

我尝试使用一些边距和填充，但是没有。如果我尝试使用一些边距，则进行填充，但是离开容器，页面会变得混乱。

如何纠正？

答案

使用flex时可以使用

justify-content: space-between;

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

所以看看flex。