Элементы в форме слиплись,как задать отступы между ними?

Question

[Fresko1991]

<section class="section-form">
            <div class="container form-container">
                <h2 class="section-title form-title ">
                    What Are You Waiting For?
                </h2>
                <p class="form-description ">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                </p>
                <form action="https://jsonplaceholder.typicode.com/posts" autocomplete method="POST">
                    <input type="text" name="name" placeholder="Name" class="input" id="name">
                    <input type="email" name="email" placeholder="E-mail" class="input">
                    <input type="tel" name="phone" placeholder="Phone" class="input">
                    <button type="submit" class="btn-form btn-submit">
                        Get stated
                    </button>
                </form>
            </div>
        </section>

.section-form {
    border-top: 1px solid #e4e4e4;
    padding-bottom: 140px;

}
.form-title {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 100px;

}

.form-description {
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    color: #787878;
}

.form {
    display: flex;
    justify-content: space-around;
    margin-top: 58px;
}

.input,
.btn-submit {
    flex: 0 0 calc(25% - 15px);
    height: 60px;
}
.btn-form {
    display: inline-block;
    padding: 15px 100px;
    font-size: 12px;
    color: aliceblue;
    background-color: rgb(47, 128, 235);
    text-transform: uppercase;
    line-height: 1;
    border-radius: 30px;
    cursor: pointer;
}

.input {
    padding: 0 30px;
    border: 1px solid #dadada;
    border-radius: 30px;
}

.input::placeholder {
    color: #787878;
}

Answer 1

[Айрат]

Думаю наиболее оптимальным способом будет следующее:

1. для form задаешь margin: -20px;
   
2. для input'ов и button задаешь margin: 20px;
   
   

Comments

[Айрат]

есть и другой способ: для form задаешь

display: flex; 
justify-content: spase-between;

[Fresko1991]

Айрат,
спасибо большое! Супер!

[Айрат]

Пожалуйста!

Answer 2

[Vladislav]

gap: 10px только он не во всех браузерах работает https://caniuse.com/?search=gap

Comments

[Fresko1991]

в хроме не пашет, пробовал уже его. Хотя браузер последней версии и на сайте тому подтверждение.