Modelo de Caixa CSS
Todos os elementos do html pode ser considerado uma caixa.
MODELO DE CAIXA CSS
É usado em design e layout.
As partes da caixa:
Conteúdo – onde fica o textos e imagens.
Preenchimento – Limpa a área ao redor do conteúdo.
Borda – é o contorno o preenchimento e o conteúdo.
Margin – limpa área ao redor da
borda.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
width: 250px;
border: 10px solid black;
padding: 40px;
margin: 15px;
}
</style>
</head>
<body>
<h2>Demonstrando o modelo de caixa</h2>
<p>O modelo de caixa CSS é essencialmente uma caixa que envolve
cada elemento HTML. Consiste em: bordas, preenchimento, margens e o conteúdo
real.</p>
<div> Este texto é o conteúdo da caixa. Adicionamos um
preenchimento de 40px, uma margem de 15px e uma borda verde de 10px. Pois, para
chegar ao mais ínfimo detalhe, ninguém deve praticar qualquer tipo de trabalho,
a menos que tire algum proveito disso. Não se irrite com a dor na repreensão,
no prazer que ele quer ser um fio de cabelo da dor, deixe-o fugir da dor. A
menos que sejam cegados pela luxúria, eles não saem; eles são culpados por
abandonar seus deveres e abrandar seus corações, isso é labuta..</div>
</body>
</html>
Largura e altura de um elemento
Largura total da <div> é 310px
290px (largura)
+ 15px (preenchimento esquerdo + direito)
+ 5px (borda esquerda + direita)
+ 0px (margem esquerda + direita)
= 310px
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 290px;
padding: 15px;
border: 5px solid
gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calcule a largura total:</h2>
<img src="nomedaimagem.jpg"
width="330" height="263" alt="imagem">
<div>A imagem acima tem 330px de largura. A largura
total deste elemento também é 330px..</div>
</body>
</html>
A
largura total de um elemento deve ser calculada assim:
Largura
total do elemento = largura + preenchimento esquerdo + preenchimento direito +
borda esquerda + borda direita + margem esquerda + margem direita
A
altura total de um elemento deve ser calculada assim:
Altura
total do elemento = altura + preenchimento superior + preenchimento inferior +
borda superior + borda inferior + margem superior + margem inferior