Tamanho de um elemento
Last updated
Last updated
O layout do CSS é baseado no modelo de caixas. Isso significa que podemos pensar em seus elementos como caixas que colocamos uma em cima da outra ou uma dentro da outra, e que modificamos sua cor, tamanho, posição entre outras características.
Todos os elementos possuem 3 propriedades:
padding: o espaço ao redor do conteúdo (content) até o border .
border: uma linha (borda) entre o padding e margin.
margin: espaço externo (expansão) do elemento.
Abaixo temos um exemplo genérico, retirado de W3Schools:
Abaixo temos um exemplo prático. Na aba "HTML" temos o código em HTML, em "CSS" o código em CSS e em "Resultado" temos a página resultante.
Agora que você observou o exemplo e concluiu que tem algumas coisas que não fazem sentindo, vamos deixar mais claro ao responder algumas perguntas!
A <div> tem margin: 0px; mas ela não toca o <h1>, porque?
Isso acontece porque <h1> tem uma margem de 10px, que é o espaço entre <h1> e <div>.
Porque a <div> não toca os cantos da margem sendo que temmargin: 0px ?
Isso acontece porque o bodytambém tem uma margem.
Outra parte que você provavelmente reparou foi que em <p> está escrito padding-top: 0px; . Isso acontece pois podemos definir qual "canto" do elemento queremos modificar e, portanto, atribuir valores específicos a cada um deles. Você pode usar:
top: muda a parte de cima do elemento.
bottom: muda a parte de baixo do elemento.
right: muda a parte direita do elemento
left: muda a parte esquerda do elemento.
Você pode aplicar essas definições nas três propriedades: padding, border, margin.
Podemos também definir a altura e largura de um elemento com os comandos height e width respectivamente. Quando fazemos isso, estamos definindo somente o tamanho do conteúdo (content). O tamanho total do elemento é soma de todas as suas propriedades.
Por exemplo,
O tamanho total desse elemento é 82px.
Margin = 0 px
Padding = 50px (bottom)
Border = 2px (top + bottom)
Height = 30px
Total = 82px
