Padding and margin dont affect space between elements

Question

I'm creating a form, so I did input fields and labels, then I wanted the fields and labels to have a space between each other.

I tried to do this by using padding-bottom in the label class, but it did not worked, when I use the devtools in the browser, I can see the padding area but it don't affect the distance between the elements, actually the inputs are in top of the padding area I added to the labels.

i did got what i wanted by adding margin to the input instead, but want to uderstand why the padding in the labels didn't worked, for learning reasons.

.main {
  padding: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  height: 80px;
  width: 100%;
  background-color: rgb(0, 0, 0);
}

.body {
  display: block;
  margin: 0;
  background-color: #141414;
  min-height: 100vh;
}

.button {
  background-color: rgba(0, 0, 0, 0);
  border-style: solid;
  font-size: 12px;
  border-width: 1px;
  border-color: rgb(116, 22, 224);
  border-radius: 5px;
  font-weight: bold;
  color: #ffffff;
  width: 150px;
  height: 100%;
  min-height: 25px;
  cursor: pointer;
}

.button:hover {
  background-color: rgb(116, 22, 224);
  border-style: solid;
  border-width: 1px;
  border-color: rgb(116, 22, 224);
  border-radius: 5px;
  font-weight: bold;
  color: #ffffff;
  width: 150px;
  height: 100%;
  min-height: 25px;
  cursor: pointer;
}

.navbar {
  margin-left: auto;
  margin-right: 50px;
  padding: 20px;
  max-width: 1000px;
  align-items: center;
}

.labels {
  color: white;
  width: 100%;
  font-size: 20px;
  font-family: monospace;
  padding-bottom: 25px;
}

.inputs {
  background-color: #000000;
  box-sizing: border-box;
  border-style: solid;
  height: 35px;
  width: 100%;
  border-width: 2px;
  border-radius: 10px;
  border-color:rgb(116, 22, 224);
}

.title {
  color: white;
  font-family: monospace;
}

.form {
  align-content: center;
  justify-content: center;
}

.formcontainer {
  box-sizing: border-box;
  background-color: black;
  border-radius: 10px;
  padding: 25px;
  width: 400px;
  max-width: 400px;
  height: 600px
}

.formcontainerdelimiter {
  max-width: 400px;
  display: block;
}

    <html lang="en">
      <body class="body">
        <header class="header">
          <div class="navbar">
            <Link href="/register">
                <button class="button">REGISTER</button>
            </Link>
          </div>
        </header>
      <main class="main">
      <div class="formcontainerdelimiter">
        <div class="formcontainer">
          <form class="form" action="" method="post">
            <h1 class="title">Crie sua conta</h1>
            
            <label class="labels" htmlFor="email">E-mail:</label><br />
            <input class="inputs" type="email" id="email" name="email" required /><br />

            <label class="labels" htmlFor="password">Password:</label><br />
            <input class="inputs" type="password" id="password" name="password" required /><br />

            <label class="labels" htmlFor="confirm-password">Confirm Password:</label><br />
            <input class="inputs" type="password" id="confirm-password" name="confirm-password" required /><br />

            <input type="submit" value="Submit" />
          </form>
        </div>
      </div>
    </main>
  </body>
</html>

Please include your HTML as well, and preferably format everything into a StackSnippet (the <> icon in the toolbar). Your CSS is mostly meaningless without the matching HTML. — Jake, Mar 28 '23 at 00:20
I think because of this :: https://stackoverflow.com/a/7168692/12909051 — mmirbekian, Mar 28 '23 at 00:38
Well, making labels inline-blocks actually worked. But i also tried to make it blocks, but it created even more space between than what I specified in the padding. Do you know the reason? — Felype Terra, Mar 28 '23 at 00:52
Well, I guess I figured it out, it's because of the
tag, when i use it with the labels set as block, it takes a little amount of space after the label, but, if i set the label to inline-block, the
tag uses the same line so don't take any space. The best thing to do is to remove the
tag and make the spaces only with css. — Felype Terra, Mar 28 '23 at 01:03

Felype Terra · Answer 1 · 2023-03-28T01:18:20.647

I solved the problem by using the display property set to 'block' in the labels class and removing the <br> tags.

Label tags are, by default, inline elements, which means they don't accept any padding or margin. The point of inline elements is that they can be displayed side by side, or in line as the name suggests.

When set as 'block', they can accept padding, margin, and other settings that block elements accept, but they can no longer have other elements by their side, which I would prefer.

Another way to solve this issue would be to set the display property as 'inline-block', which would take advantage of both ways, allowing it to accept settings as block elements and display other elements by its side as inline elements.

Padding and margin dont affect space between elements

1 Answers1