Resumo do Transcript

Um jeito de ajeitar isso é modificando uma propriedade de estilo chamado box sizing, de content box para border box. Então, por padrão, esse cara aqui, o cálculo da largura do elemento aqui não vai incluir o padding e não vai incluir a borda. Se você quiser, sempre que, quando você adicione borda aqui, a largura, a borda e parem sejam contados na largura do elemento, você tem que modificar o box sizing. Então, aqui na classe do espaço, eu vou mudar a box sizing, tá? Em vez de content box, que é o padrão, eu vou mudar para border box. Agora ele vai contar a borda e parem como a largura final do cara, tá? Agora não vai ter mais problema se a gente adicionar qualquer borda. Ele não vai quebrar, mandar os caras para a linha de fora, senão, deixa eu aumentar a borda, ele ainda conta 128 total e não tem mais aquela quebra de estrutura, tá? Então, deixa eu mudar de volta para 6, 3. Pronto, então, adicionar a borda right, tá? E vou adicionar a borda bottom, que é no abaixo, da mesma coisa, 3 pixels, solid black, tá? Então, com isso vamos atualizar nosso arquivo fora de estilo, para não poder esquecer. Vou copiar esses dois caras, vou lá de volta editor de texto, aqui depois de espaço, eu vou criar uma nova, selecionei para ser o esquerda acima, se lembra que a gente tinha um esquerda acima como o ID, do primeiro cara aqui. Então, esse cara vamos adicionar a borda dessa maneira aqui, opa. Aí para o espaço, você vai botar o box size, mudar de content box para a border box, salvar. Tá, então, tá aí. Então, a gente vai fazer a mesma coisa para cada espaço, então vai ser nove caras, vai ser um pouco tedioso, mas tem que fazer. Tá, então vamos fazer aqui. Para o próximo, que é o centro acima, se lembra, é o próximo. Nós vamos definir uma borda à esquerda, respecto solid black, uma borda solid, adicuo black, tá? Eu estou usando as coisas, não estou pensando muito em, eu só quero botar um estilo que funcione, não vou pensar no que eu vou usar, exa decimal, não sei o que, agora, tá? Então, a esquerda, quero borda abaixo, então essa borda da esquerda vai complementar a borda da direita do esquerda acima, tá? Então eles vão virar seis, três mais três, seis, tá? E finalmente o border right, que é a direita, respecto solid black. Então vamos lá. Tá, então complementou a borda da direita do esquerda acima com a do centro acima, a borda esquerda do centro acima, então virou seis, sabe? A mesma coisa vai acontecer com os outros quando a gente terminar tudo. Então eu vou deixar com um exercício aqui para você completar todos os outros, da sua forma aqui, completar todos os estilos para cada espaço, aí depois a gente vê a solução, uma das soluções na próxima aula, tá bom? Até a próxima.