how do you shrink a form block?-CodePudding

Image I want to make my form block smaller so then I can have my navigation buttons on the size

        <form>
         <legend><h1>login</h1></legend>
         user: <input id="Email" type="email" >
         <br>
         password: <input id="password" type="password" > 
         <br>   
         <button >Login</button>
         <nav>
            <a href="SignUpPage.HTML" >Dont have an account?</a>
         </nav>
        </form>

I tried changing the margin:

    margin: 0 300px 0 300px;

and I tried charging the padding:

    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 400px;

however that only changed the size of the border and not the block itself

CodePudding user response：

You have to style the input

input {
  width: 1%;
  height: 1%;
  box-sizing: border-box;
}

CodePudding user response：

I think you want to make the login section smaller? So you can have a nav bar on side?

<div style="width: 175px; height: 200px; border-width: 1px,black;border-style: solid;">
<form  >
    <legend><h2 style="text-align: center;">Login</h2></legend>
    user: <input id="Email" type="email" >
    <br>
    password: <input id="password" type="password" > 
    <br>   
    <button >Login</button>
    <nav>
       <a href="SignUpPage.HTML" >Dont have an account?</a>
    </nav>
   </form>
   </div>

See if this helps? You might look into flexbox vs and grid, see if that will is what you are trying to achieve. Also look up css styling and how padding and margins affect the layout of your webpage.