This happens because the button (both button with input how much button with button) is by default property box-sizing worthwhile border-box:
The value border-box prevents the padding and the edge of the element is added to the width and height of the element, so your button is smaller than the text fields, which defaults to the value content-box (you can learn more about the box-sizing in this documentation).
To solve this, just change the box-sizing from the button to content-box, that everything will be the same size, because the button will add the padding and the border to its dimensions:
*{
margin: 0px;
padding: 0px;
}
input{
display: block;
height: 50px;
width: 400px;
margin: 5px;
border-radius: 30px;
border: 1px solid black;
font-size: 16pt;
padding: 10px 20px;
box-sizing: content-box;
}
div#corpo-form{
/*background-color: red;*/
width: 420px;
margin: 150px auto 0px auto;
}
<div id="corpo-form">
<h1>Entrar</h1>
<form>
<input type="email" placeholder="Usuário">
<input type="password" placeholder="Senha">
<input type="submit" value="Entrar">
<a href="">Clique aqui para cadastrar-se!</a>
</form>
</div>
If you don’t want to change this pattern for all buttons, just create a specific class just for that button. For example, .contBox:
*{
margin: 0px;
padding: 0px;
}
input{
display: block;
height: 50px;
width: 400px;
margin: 5px;
border-radius: 30px;
border: 1px solid black;
font-size: 16pt;
padding: 10px 20px;
}
.contBox{
box-sizing: content-box;
}
div#corpo-form{
/*background-color: red;*/
width: 420px;
margin: 150px auto 0px auto;
}
<div id="corpo-form">
<h1>Entrar</h1>
<form>
<input type="email" placeholder="Usuário">
<input type="password" placeholder="Senha">
<input class="contBox" type="submit" value="Entrar">
<a href="">Clique aqui para cadastrar-se!</a>
</form>
</div>
Problem
Another problem is that you set the div id="corpo-form" with 420px width and inputs with 400px + 20px de padding + 1px de borda. Add it all up 442px, overtaking 42px the width of the div (not counting the margin of 5px who placed).
To stay straight, change the width from the input to 442px and the margin for margin: 5px; to have margin only in the top and bottom of inputs.
Even better solution
Not to worry about the width of the elements and that they occupy the total width of the div, beyond the box-sizing: content-box, place width: 100%. And in the main div reduce the width for 400px (or 420px if you want):
*{
margin: 0px;
padding: 0px;
}
input{
display: block;
height: 50px;
width: 100%;
margin: 5px 0;
border-radius: 30px;
border: 1px solid black;
font-size: 16pt;
padding: 10px 20px;
box-sizing: content-box;
}
div#corpo-form{
/*background-color: red;*/
width: 400px;
margin: 150px auto 0px auto;
}
<div id="corpo-form">
<h1>Entrar</h1>
<form>
<input type="email" placeholder="Usuário">
<input type="password" placeholder="Senha">
<input type="submit" value="Entrar">
<a href="">Clique aqui para cadastrar-se!</a>
</form>
</div>
What do you mean same size, @LYNTT ? They are buttons of different types, natural not to have identical sizes. One is for text, another for password and Submit.
– Gato de Schrödinger
If you want to put different stylings to each of them, you should assign an id or class to each of them and style. Example: <input type="Submit" value="Enter" id="enter">. To style it would be input#send{your css styling code inside}. In this case, only the Ubmit input would take the stylizations.
– Gato de Schrödinger
Because they are buttons of different types, it has its own styling characteristics. Take a look at this example. By far not the most correct way to do it, but at least you will have an idea of how to work using ids as selectors and how to style each of them individually. https://jsfiddle.net/xz8uthd5/
– Gato de Schrödinger
Thank you @Gambi for helping me solve my problem, now I can leave to complete this small project.
– LYNTT
But, @LYNTT. That’s not the best way to fix it. So much so that I didn’t put it as a response, but as a comment and posted the code on the fiddle. Take a closer look at CSS. I’m a beginner too, we’re in the same boat looking for more and more knowledge. May strength be with you!
– Gato de Schrödinger
Understood, may the Force be with you too @Gambi.
– LYNTT