Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida com tamanho do elemento blockquote no inspetor de elementos

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Aprimorando o layout e atividade box-sizing

por Guilherme Iwane
| 51.7k xp | 4 posts
Analista de Sistemas

Caros, bom dia.

Apliquei o seguinte CSS para o blockquote:

blockquote, aside, footer{
    padding: 20px;
}

blockquote{
    border: solid 10px #C2CCCA;
    width: 250px;
    box-sizing: border-box;
}

Ao verificar o layout (box model) pelo inspetor de elemento do navegador, as medidas foram apresentadas da seguinte forma:

margin: 40 border: 10 padding: 20 conteudo : 190x240

Se o valor border-box da propriedade box-sizing leva em consideração as medidas do conteudo, padding e border, o conteúdo não deveria medir 220?

2 respostas
por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Se os 220 que você se refere dão o height (altura), ele não tem tamanho definido, por que ele depende da quantidade de conteúdo que ele abarca.

Quanto ao border-box, ele vai desconsiderar o margin do seu elemento. Isso quer dizer o seguinte:

O seu navegador está com 250px, desconsiderando 10px de cada lado do código border: solid 10px #C2CCCA; e 20px do padding. A diferença é que o padding, por ser interno, é desconsiderado só uma vez.

Fazendo as contas:

250 - 10 *4(border) - 20(padding) = x 250 - 40(border)-20(padding) = x 250 - 60(border e padding somados) = x 250 - 60 = 190

Está correto. Para ele ser 220, você tem que deixar o padding 5px.

solução!
por Guilherme Iwane
| 51.7k xp | 4 posts
Analista de Sistemas

Allan, na realidade, entendi minha confusão.

O conteúdo ficou com width de 190 px pois foi descontado os valores de border e padding de ambos os lados (esquerda e direita):

border (esquerda) :10px + padding (esquerda) : 20px + conteudo: 190px + padding (direita): 20px + border (direita): 10px = 250px