CSS | Creating gaps between elements within a form

Question

CSS | Creating gaps between elements within a form

My form is currently inside a flexbox card with two sides - left and right. The left side displays a picture, while the right side contains the actual input fields. I'm looking to add more space between the different inputs as they feel too cramped at the moment. I've attempted using flexbox properties like justify-content: space-around and space-between, but neither yielded the desired results.

I've also experimented with adding margin and padding to both the form and its elements, but I believe there must be a more effective solution out there. To provide better context, I have attached an image along with the JSFiddle link for reference.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: Roboto;
    font-size: 0.9em;
    background-color: #ccf2f4;
}

img {
    width: 200px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card {
    width: 75vw;
    margin: 10px;
    background-color: #a4ebf3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.card-left,
.card-right {
    padding: 10%;
}

<div class="card">
    <div class="card-left">
        <img src="https://media.bleacherreport.com/f_auto,w_800,h_533,q_auto,c_fill/br-img-slides/004/431/800/ca7761a4360ae26cb69ee014607228b7_crop_exact.jpg" alt="" />
    </div>
    <div class="card-right">
        <form action="">
            <div class="name">
                <label for="name" placeholder="Name">Name</label>
                <input type="text" id="name" required />
            </div>
            <div class="seat">
                <label for="seat">Select your seat</label>
                <select name="seat" id="seat">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class="handicapped">
                <label for="handicap">Handicapped?</label>
                <input type="checkbox" value="Handicapped" />
            </div>
            <div class="wrestler">
                <label for="wrestler">Select for favorite superstar</label>
                <select name="wrestler" id="wrestler">
                    <option value="asaka">Asaka</option>
                    <option value="mcintyre">Drew Mcintyre</option>
                    <option value="zayne">Sami Zayne</option>
                    <option value="reigns">Roman Reigns</option>
                    <option value="flair">Charlotte Flair</option>
                </select>
            </div>
            <div class="submit">
                <button>Sign Up!</button>
            </div>
        </form>
    </div>
</div>

While my primary expertise lies in JavaScript, I've been actively working on projects to enhance my CSS skills and expand my knowledge base. Your assistance and time are greatly appreciated. You can view a screenshot here.

html css flexbox

Answer 1

Answer №1

If you're looking to create some space between your input elements, a simple CSS tweak can do the trick:

.card-right div{
  margin-bottom: 10px;
}

This adjustment will work well because each input element is already contained within its own div.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-size: .9em;
  background-color: #ccf2f4;
}

img {
  width: 200px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card {
  width: 75vw;
  margin: 10px;
  background-color: #a4ebf3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.card-right div {
  margin-bottom: 10px;
}

.card-left,
.card-right {
  padding: 10%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Simple Form Demo</title>
</head>

<body>
  <div class="container">
    <h1>Wrestlemania 36 Sign Up!</h1>
    <h2>Use the form below to reserve your spot for the year's biggest event</h2>
    <div class="card">
      <div class="card-left">
        <img src="https://media.bleacherreport.com/f_auto,w_800,h_533,q_auto,c_fill/br-img-slides/004/431/800/ca7761a4360ae26cb69ee014607228b7_crop_exact.jpg" alt="">
      </div>
      <div class="card-right">
        <form action="">
          <div class="name">
            <label for="name" placeholder='Name'>Name</label>
            <input type="text" id='name' required>
          </div>
          <div class="seat">
            <label for="seat">Select your seat</label>
            <select name="seat" id="seat">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>

          </div>
          <div class="handicapped">
            <label for="handicap">Handicapped?</label>
            <input type="checkbox" value='Handicapped'>
          </div>
          <div class="wrestler">
            <label for="wrestler">Select for favorite superstar</label>
            <select name="wrestler" id="wrestler">
              <option value="asaka">Asaka</option>
              <option value="mcintyre">Drew Mcintyre</option>
              <option value="zayne">Sami Zayne</option>
              <option value="reigns">Roman Reigns</option>
              <option value="flair">Charlotte Flair</option>
            </select>
          </div>
          <div class="submit">
            <button>Sign Up!</button>
          </div>
        </form>
      </div>
    </div>

  </div>

</body>

</html>

To see this in action, check out this helpful example on JSFiddle.

Answer 2

If you're looking to create some space between your input elements, a simple CSS tweak can do the trick:

.card-right div{
  margin-bottom: 10px;
}

This adjustment will work well because each input element is already contained within its own div.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-size: .9em;
  background-color: #ccf2f4;
}

img {
  width: 200px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card {
  width: 75vw;
  margin: 10px;
  background-color: #a4ebf3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.card-right div {
  margin-bottom: 10px;
}

.card-left,
.card-right {
  padding: 10%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Simple Form Demo</title>
</head>

<body>
  <div class="container">
    <h1>Wrestlemania 36 Sign Up!</h1>
    <h2>Use the form below to reserve your spot for the year's biggest event</h2>
    <div class="card">
      <div class="card-left">
        <img src="https://media.bleacherreport.com/f_auto,w_800,h_533,q_auto,c_fill/br-img-slides/004/431/800/ca7761a4360ae26cb69ee014607228b7_crop_exact.jpg" alt="">
      </div>
      <div class="card-right">
        <form action="">
          <div class="name">
            <label for="name" placeholder='Name'>Name</label>
            <input type="text" id='name' required>
          </div>
          <div class="seat">
            <label for="seat">Select your seat</label>
            <select name="seat" id="seat">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>

          </div>
          <div class="handicapped">
            <label for="handicap">Handicapped?</label>
            <input type="checkbox" value='Handicapped'>
          </div>
          <div class="wrestler">
            <label for="wrestler">Select for favorite superstar</label>
            <select name="wrestler" id="wrestler">
              <option value="asaka">Asaka</option>
              <option value="mcintyre">Drew Mcintyre</option>
              <option value="zayne">Sami Zayne</option>
              <option value="reigns">Roman Reigns</option>
              <option value="flair">Charlotte Flair</option>
            </select>
          </div>
          <div class="submit">
            <button>Sign Up!</button>
          </div>
        </form>
      </div>
    </div>

  </div>

</body>

</html>

To see this in action, check out this helpful example on JSFiddle.

Answer 3

Answer №2

.card-right div {
    margin: 0 15px;
}

Answer 4

.card-right div {
    margin: 0 15px;
}

CSS | Creating gaps between elements within a form

Answer №1

Answer №2

Similar questions

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Executing jQuery AJAX with PHP using 'POST' method to receive and process PHP code

bootstrap used for creating horizontal radio buttons

Create an HTML button on the homepage that directs users to the "about" page

The popover seems to be failing to appear

I want to know how to showcase elements from a list one by one and cycle through them using a button with a nodejs server and Pug

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Opening the Gmail app from a link using JavaScript

Troubleshooting issues with cloning a row using jquery

Adjust the span's width to make it shift position

Could you please guide me on resolving the Blazor/Bootstrap 5 CSS problem related to styling "striped" tables?

developing both vertical and horizontal 'cross out'

Locate an original identifier using Selenium WebDriver

Utilizing Ant Design Icons without an Internet Connection

JavaScript: Understanding the concept of closure variables

Implementing Materialize CSS functionality for deleting chips

What is the proper way to leverage the global 'window' object within Angular?

Changing the description doesn't affect the fixed height of the box - here's how to do it with CSS

Achieving vertical alignment and stretching of subchild within a flexbox element

Incorporating jQuery to seamlessly add elements without causing any disruptions to the layout