@Fresko1991

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

60e1a2b6495d8212932267.jpeg

<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;
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
Airat-2020
@Airat-2020
Frontend developer
Думаю наиболее оптимальным способом будет следующее:
  1. для form задаешь margin: -20px;
  2. для input'ов и button задаешь margin: 20px;

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик
gap: 10px только он не во всех браузерах работает https://caniuse.com/?search=gap
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы