input field displayed out of the box in login form using css-CodePudding

Im trying to create simple login form using html and css but my input field is displayed below the form what is error..

<body>
    <div >
      <div >
        <div >
          <h1>Hello heading</h1>
        </div>
        <div >
          <input type="text" />
        </div>
      </div>
    </div>
  </body>
````````````````
my csss 
```````````````
    * {
    padding: 0;
    margin: 0;
    font-family: serif;
    height: 100vh;
    }
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    }
    .loginForm {
    width: 350px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 3px rgb(182, 169, 169);
    }

and this is the link online editor: https://stackblitz.com/edit/web-platform-pmvylw?file=styles.css

CodePudding user response：

Try the below changes:

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
  height: 100vh;
}

.container .loginForm {
  width: 40%;
  height: 60%;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1px 3px rgb(182, 169, 169);
}

<body>
  <div >
    <div >
      <div >
        <h1>Hello heading</h1>
      </div>
      <div >
        <input type="text" />
      </div>
    </div>
  </div>
</body>

Mainly assigning height as 100vh on all elements was causing this issue.

Hope that's how you wanted it to look.

CodePudding user response：

First of all you can declare you width in body and use margin: 0 auto; to get div in center horizontally than you can apply

display: flex;

align-items: center;

to center it vertically.

Now your parent element which is body have 100vh and your .container have 40rem height in this situation if you declare your

.container .loginForm {
   height:100%; 
}

it will take 40rem as a height which is .container(parent) height.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  font-family: serif;
}

body {
  min-height: 100vh;
  width: 35rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.container {
  height: 40rem;
  background: #f2f2f2;
  width: 100%;
}

.loginForm {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.3rem rgb(182, 169, 169);
  height: 100%;
}

<div >
      <div >
        <div >
          <h1>Hello heading</h1>
        </div>
        <div >
          <form action="">
            <input type="text" name="" id="" />
          </form>
        </div>
      </div>
    </div>