Solucionado
Não entendi porque usar "display: block"
.botao-index {
font-size: 1.25em;
background-color: #851944;
color: #FFF;
padding: .5em;
border: .2em solid black;
width: 40ch;
margin: 2em auto;
display: block;
text-align: center;
}hoje, com a Alura e o Google Gemini
Olá, Júlio! =)
A propriedade display possui diversos valores, desde inline e block, até inline-block, table, entre outros, incluindo alguns valores ainda experimentais...
As mais usadas acredito que sejam as três primeiras... E quais as diferenças entre elas?
Um das grandes diferenças é fato de que o display: inline não aplica os valores de margin e padding na vertical, ou seja, top e bottom, além de não aplicar os valores de height e width! Dessa forma, observe que algumas das propriedades que aplicamos não seriam válidas caso não optássemos por display: block ou display: inline-block. =)
Espero ter ajudado, mas qualquer dúvida não hesite em perguntar! =)
Abraço e bons estudos,
Fábio
Então usamos o display: block por que o elemento é um elemento de linha e queremos aplicar regras de elementos de bloco? Posso dizer então que elementos de linha não possuem margin, paddin, weight e width?
Júlio,
Cuidado! Todos os elementos possuem todas essas propriedades que você mencionou, a diferença é no valor delas.
Elementos inline terão valores auto para margin-top, margin-bottom, padding-top, padding-bottom, height e width. Ou seja, eles possuem os valores, mas não somos nós que determinamos.
A tag <p> é um exemplo de elemento inline. Repare que a largura e altura dela vão de acordo com o texto que estiver dentro dela. =)
Fábio