F
F
Fresko19912021-07-04 15:01:56
css
Fresko1991, 2021-07-04 15:01:56

Elements in the form stuck together, how to set the indents between them?

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;
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Airat, 2021-07-04
@Fresko1991

I think the best way would be:

  1. for form you setmargin: -20px;
  2. for inputs and buttons you setmargin: 20px;

V
Vladislav, 2021-07-04
@SlavaMaxwell

gap: 10pxonly it does not work in all browsers https://caniuse.com/?search=gap

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question