Aloquei o botão como pedia o exercício usando "position: relative" no "form" e "position: absolute" no "button" atribuindo o valor 0 às propriedades "bottom" e "right"(conforme demonstrado no código). Gostaria de saber se existe algum prejuízo nessa forma de solução no que se refere à versatilidade ou resiliência.
legend,
label[for="mensagem"] {
font-weight: bold;
margin-top: 1em;
}
label[for] {
display: block;
}
input[type="text"],
input[type="email"],
textarea {
/* Força o navegador a usar a mesma fonte da página */
font-family: inherit;
/* Inclusive o tamanho dela */
font-size: 100%;
padding: .25em .5em;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
}
form{
position: relative;
padding-bottom: 4em;
}
fieldset > fieldset {
display: inline;
}
/* deixar o rótulo dele inline de novo */
label[for="outro"] {
display: inline;
}
/* deixar só esse campo sem ocupar a tela toda */
input[name="outro-assunto"] {
width: auto;
}
input:focus,
textarea:focus {
background-color: #FFD;
}
input:invalid {
box-shadow: 0 0 3px red;
}
button {
/* Precisamos tirar a borda que o navegador coloca por padrão */
border: 0;
padding: .5em 1em;
font-family: "Open Sans Condensed", sans-serif;
background-color: #3C1D3D;
color: white;
font-size: 1.2em;
/* Faz com que o botão apareça na direita*/
/*margin-left: auto;
margin-top: 1em;
display: block;*/
position: absolute;
bottom: 0;
right: 0;
}
button:hover,
button:focus {
background-color: #8C1D3D;
}
No mais, gostaria de entender melhor a solução descrita para o posicionamento do botão usando "margin". Pelo que pude perceber através de testes que fiz, o "margin-left" não promove mudança substancial já que o margeamento verificado no console é nulo à esquerda(não sei se essa é justamente a função do atribuir "auto" à essa propriedade e eu não havia entendido até agora) e, no final das contas, o comando que promove o posicionamento do botão à direita é o "display: block". Por enquanto, são minhas impressões. Gostaria de entender melhor a lógica por trás dessas duas linhas de comando no css.