CODEWITHSUNDEEP
htmlcss
Vadventra
Vadventra

Reputation: 29

How can I change the spacing between labels and inputs?

I want all of the inputs to align with each other, but it seems that because the renminbi and won currency symbols are larger, they are pushing their inputs further away. I tried adding negative padding (which did nothing) and negative margins (which also moved the inputs), but neither worked. How can I reduce the spacing between these two inputs and labels?

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

main {
    width: 100%;
    height: 210vh;
    background-color: orange;
}

.inputs {
    display: grid;
    justify-content: center;
    align-items: center;
    max-width: 768px;
    margin: 0 auto;
}

.input {
    margin: 15px;
    background-color: #FFF;
    border-radius: 8px;
    padding: 15px;
    border: none;
    outline: none;
    transition: 0.4s;
}
    <main>
        <section class="inputs">
            <label for="usd" class="">$
                <input type="number" name="usd" id="usd" class="input" placeholder="Dollar">
            </label>
            <label for="euro" class="">€
                <input type="number" name="euro" id="euro" class="input" placeholder="Euro">
            </label>
            <label for="yen" class="">¥
                <input type="number" name="yen" id="yen" class="input" placeholder="Yen">
            </label>
            <label for="renminbi" class="">元
                <input type="number" name="renminbi" id="renminbi" class="input" placeholder="Renminbi">
            </label>
            <label for="won" class="">₩
                <input type="number" name="won" id="won" class="input" placeholder="Won">
            </label>
        </section>
    </main>

Upvotes: 1

Views: 454

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19111

I would add a wrapper around the emoji characters so that you can declare label as a parent, making the emoji characters and inputs as grid children. The reason this is necessary is because raw text nodes cannot be targeted via CSS.

From there, we can define our columns and control the spacing how we'd like. For the columns, the emoji to take up one fraction unit (fr) and have the remaining space in each row occupied by the input (auto).

label {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 0.25rem;
}

Chrome has a nice grid inspector which visualizes the above explanation nicely.

enter image description here

Demo

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

main {
  width: 100%;
  height: 210vh;
  background-color: orange;
}

.inputs {
  display: grid;
  justify-content: center;
  align-items: center;
  max-width: 768px;
  margin: 0 auto;
}

.input {
  margin: 15px;
  background-color: #FFF;
  border-radius: 8px;
  padding: 15px;
  border: none;
  outline: none;
  transition: 0.4s;
}

label {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 0 0.25rem;
}

label i {
  font-style: normal;
}
<main>
  <section class="inputs">
    <label for="usd" class="">
      <i>$</i>
      <input type="number" name="usd" id="usd" class="input" placeholder="Dollar">
     </label>
    <label for="euro" class="">
      <i>€</i>
      <input type="number" name="euro" id="euro" class="input" placeholder="Euro">
     </label>
    <label for="yen" class="">
      <i>¥</i>
      <input type="number" name="yen" id="yen" class="input" placeholder="Yen">
    </label>
    <label for="renminbi" class="">
      <i>元</i>
      <input type="number" name="renminbi" id="renminbi" class="input" placeholder="Renminbi">
    </label>
    <label for="won" class="">
      <i>₩</i>
      <input type="number" name="won" id="won" class="input" placeholder="Won">
     </label>
  </section>
</main>

Upvotes: 2

Dvalo
Dvalo

Reputation: 117

First of all, your input fields are wrapped within <label> tags, I assume you were adding padding/margins to <label> tags and that obviously wouldn't help your case. So first of all, you can create a separate div which would wrap your label and input field. for example:

<div class="field-wrapper">
    <label for="usd">$</label>
    <input type="number" name="usd" id="usd" class="input" placeholder="Dollar">
</div>

After that, you can use CSS Flexbox to align label and input fields next to each other, for example:

.field-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

After which they should be equally aligned, otherwise you can define width for .field-wrapper label and that should work perfectly.

Upvotes: 1

Related Questions