Интервал между элементами в HTML

Question

Я работаю в угловом приложении. У меня есть следующий код в моем компоненте 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. (Immage может быть что-то вроде отметки) 2) Сообщение должно иметь image.svg чуть ниже, чем в центре. Но это происходит в случайных местах на странице.

Я пытался использовать некоторые поля и отступы, но не получил их. Если я попытаюсь использовать какое-то поле, тогда отступ, но выхожу из контейнера, и страница становится грязной.

Как это исправить?

Answer 1

Когда вы используете flex, вы можете использовать

justify-content: space-between;

, чтобы добавить пространство между элементами в одном контейнере.

, так что посмотрите на flex.

Answer 2

Сначала вам нужно взглянуть на свой код в строке 41.

Ссылка это для получения информации об основных практиках HTML,Также вы можете обратиться к this за помощью в правильных процедурах стилизации, чтобы вы могли исправить проблемы с выравниванием / интервалом.