Curso CSS Completo: Aula 14 - Propriedade Display

E aí hoje nessa aula pessoal nós vamos aprender a propriedade CSS chamada display a propriedade de spray ela é uma das mais importantes do CSS para controlar controlar o nosso layout propriedade de spray ao específica se ou como um elemento ele vai ser exibido cada elemento HTML que a gente tem dentro do nosso código ele já tem um valor de exibição padrão né um valor de display por padrão de acordo com o elemento que ele é se ele vai por exemplo ocupar toda a tela ou se ele vai ficar um do lado do outro o

tipo de comportamento que ele vai ter diante da tela e esse valor padrão ele é exibido através da sua propriedade display que a gente vai estudar agora no CSS você vai entender mais claramente esse conceito agora com a explicação quando você entender os tipos de display que a gente tem então vou fazer o seguinte eu vou limpar aqui toda minha página aqui index tá uns tirar todo esse conteúdo aqui e vamos limpar vamos dar uma organizada aqui no nosso projetinho para que a gente possa entender esse ponto do display que é um pouco mais complexo

eu vou apagar tudo esse CSS nosso aqui para gente conseguir entender o conceito aqui do display o primeiro tipo de display que a gente tem é o display do tipo bloco quer dizer um display do tipo bloco ele começa no início da linha e vai ocupar Todo o espaço da minha página ele vai se tornar um bloco completo na página então por exemplo se eu colocar aqui ó uma div coloquei uma div e aqui eu vou pedir para colocar aqui um estilo nela colocando uma borda de um pixel sólida a vermelha certo olha só que

que vai acontecer já apareceu aqui para nós tá vendo ocupando toda a minha página tá vendo ela pegou do início até o fim porque a tag do tipo div ela vem por padrão com o display do tipo bloco outra tag que vem com display do tipo bloco é a tag de título do H1 até o h-6 então se eu colocasse o meu primeiro CSS certo e eu colocar aqui para fazer a mesma coisa vou colocar um estilo incorporado aqui ó quê que vocês vão perceber e o reparo aqui o meu elemento ele tá pegando tudo

a extensão da minha página tá vendo ela daqui do início até do final então isso aqui é um bloco por exemplo se eu colocar mais um H1 ele vai aparecer embaixo desse outro H1 mesmo se eu não der uma quebra de linha porque ele entende que é outro bloco tá vendo ele entendeu que é um bloco separado então algumas tags Elas têm um comportamento padrão de bloco seria as divs os títulos 1 até o 6 h um até o h-6 os parágrafos então se eu fizer aqui um parágrafo vou fazer aqui um Loren né um

pelore se eu for lá no início desse meu parágrafo e colocar também para ele ter mesmo estilo com borda a gente inclusive poderia fazer uma classe aqui para facilitar né vou fazer assim ó borda e vou colocar aqui borda de um pixel a sólida vermelha e aí em todo lugar que eu quero ter a borda agora em vez de fazer assim eu vou fazer a seguinte forma vou colocar aqui ó a classe borda fica muito mais simples do que eu ter que digitar isso toda vez né A gente só faz uma vez lá na nossa

classe e já fica tudo certo vou colocar aqui também no parágrafo só e par então que esses elementos eles são os elementos do display do tipo bloco ou display Block que a gente chama que ele vai ocupar toda a extensão aqui do meu código além da tag P das dívidas dos títulos a gente ainda tem algumas classes que vem por padrão com esse display do tipo bloco que seria a tag form the formulário também a reader affuter e as Action a beleza todos ficaram aqui na mesma posição mas todas estão pegando a extensão total na

minha página isso é o display do tipo bloco agora para vocês entenderem a diferença eu vou mostrar agora o display do tipo inline que seria o display em linha o display inline é quando você tem um elemento que ele não inicia numa nova linha nem ocupa toda a extensão da nossa página mas simplesmente a extensão na mesma linha de acordo com a largura que você for precisar exemplo disso é a tag do tipo a a tag do tipo ah só colocar um a HF aqui ó vou botar assim joguinho da velha para não voltar para

nenhuma página e colocar meu link aqui e você vai ver que ele vai colocar aqui ó meu link aqui agora se eu colocar mais uma tag de tipo ah olha o que que vai acontecer outro link aqui ó tá vendo que ela não pulou uma linha ela não ficou na linha de baixo porque porque ela está Ela tem o display do tipo inline ou seja na mesma linha Se eu colocar aqui a mesma classe ali ó classe borda você vai ver que o que ela vai ocupar é só o espaço exatamente do que tá dentro

dela no que está contido dentro dela na mesma linha certo ó Olá tá vendo e conseguiu compreender deixou afastar um pouquinho vou dar dois BR saque só para vocês enxergar esse melhor Ó o tamanho dela vai ficar exatamente o tamanho do que tá dentro dela do conteúdo dela e ela não vai quebrar uma linha ela vai ficar tudo na mesma linha tudo que forem online vai seguir com a mesma linha isso acontece por exemplo dentro de uma tag spam por exemplo se eu quisesse um parágrafo um parágrafo um bloco né eu poder falar assim aqui

um exemplo de parágrafo Beleza o parágrafo um bloco mas se dentro aqui do parágrafo eu colocasse assim ó exemplo de um spam um exemplo de esse aqui é uma tag do tipo de display online Então olha que que vai acontecer ele pegou o conteúdo na mesma linha e só preencheu Aquela quantidade de espaço necessário Então essa diferença de uma tag HTML que já vem com padrão display bloco e o display do tipo inline certo Quais que são do tipo inline quer dizer que fica um do lado do outro seria o spam o link e as

imagens as imagens também ficam uma do ladinho da outra elas também ficam em linha certo beleza entendido esse conceito agora a gente vai entender algumas coisinhas de como a gente usa essa propriedade lá no CSS deixa eu limpar tudo isso daqui essa bagunça e agora eu quero mostrar para vocês o seguinte vamos supor que eu tenho aqui um título certo um título 1 o meu primeiro CSS clássico é que a gente já fez certo e vou colocar aqui a borda usando a classe borda só para gente enxergar bem ele é do tipo bloco certo e

vou colocar aqui também um parágrafo oh Glory Ah e ele também é do tipo bloco a Croácia a borda aqui só para gente dar o styling da bolinha só para gente enxergar bem ok então tenho dois tipos de bloco aqui eu posso determinar por exemplo que essa minha tag p o tipo de display que eu quero usar ela não vai ser em bloco vai ser em linha aí olha só que que vai acontecer até colocar mais uma tag P para vocês enxergarem isso melhor e essa outra aqui eu não vou usar Lauren eu vou escrever

aqui alguma coisa assim é a chata vou colocar bastante assim só para vocês verem Ah beleza então em blocos beleza tudo certinho agora olha o que que acontece o display padrão de um parágrafo é o display do tipo bloco assim o display Block que ele vai fazer ele ficar na tela inteira agora se eu mudar esse display Block do parágrafo para inline quer dizer na mesma linha olha só o que que vai acontecer salvei observa aqui ele não deu aquela quebra agora ficou tudo na sequência um do lado do outro esse primeiro parágrafo ele terminou

aqui e o outro já continua aqui embaixo junto dele entendeu Se eu fosse fazer isso lá no meu título olha só que que acontecer display-inline eu tô mudando o tipo do display que é o padrão seria bloco e eu tô mudando para ir em linha Olha o que que vai acontecer vou dar um controle se percebeu como o nosso parágrafo também tá em linha e o nosso título também tá em linha ele continua a sequência como se tivesse Seguindo aqui ele não pegou toda a extensão da tela toda a minha tela não fez um bloquinho

na tela ele fez como se fosse uma sequência pegando o conteúdo dele exatamente o tamanho que ele tem de conteúdo em texto aqui e assim foi seguindo a chegou até aqui depois continua com achar e assim foi inclusive fez uma barrinha de rolagem para cá por causa do tamanho do nosso texto Então esse é o tipo de display inline e o display Block essa diferença de um para o outro certa agora a gente pode ser que queria gostaria de pegar um elemento e esconder ele no nosso o nosso não aparecer aqui no nosso layout né

então por exemplo assim ó esse nosso primeiro parágrafo e eu voltar aqui para o padrão vou tirar aqui não deixar nenhuma propriedade no parágrafo só a borda que a gente já deixou a classe lá nesse primeiro parágrafo vamos imaginar que eu não quero que ele apareça no meu código ele até vai estar o HTML aqui vai ter as coisas escritas Mas eu não quero que ele apareça no na minha página o que que eu poderia fazer poderia comentar isso daqui como a gente aprendeu na aula de HTML só que daí o código não vai está

ativo eu fizer assim ou salvar eu comentei ele realmente não vai ler mas navegador não tá lendo isso aqui porque esse meu código não está ativo mas se eu quiser que ele fica ativo mas não apareça o que que eu faço eu posso usar uma propriedade chamada display nome então eu vou daqui um Eyed Peas vou chamar assim de parágrafo conta coloquei batizei com a ide e aqui no meu seletor eu vou fazer o seguinte eu vou dizer que o meu P1 eu parágrafo ele vai ter o display como nome nenhum display nenhum eu não

é triste parágrafo aqui se eu dou um contra Oeste olha só que que acontece sumiu o parágrafo não foi mostrado legal E aí se eu coloco o display Block Por exemplo agora ele apareceria novamente certo para que que a gente usa isso pessoal essa propriedade display Block e display None a gente usa isso quando a gente quer durante a construção do nosso site e eventos dinâmicos faço aparecer ou desaparecer elementos na nossa tela depois quando a gente aprender já o script a gente vai ver que por exemplo no clique de um botão a gente pode

disparar um evento o evento poderia ser o nosso é parágrafo tem um tá mostrando quando eu clicasse no botão eu fizesse ele desaparecer não quer desaparecer assim ó Tá certo só para vocês entender esse conceito vai dar uma bugada muito louca aqui mas vamos fazer um teste aqui para vocês ver eu vou fazer o seguinte eu vou pegar esse meu P1 e vou fazer quando o mouse for sobre ele sobre ele que que é para fazer eu vou falar que é para dar um display non tô quando eu passar com o mouse sobre ele é

para ele desaparecer olha só que que vai acontecer ó desapareceu porque eu passei o mouse sobre ele ser tiro ó apareceu de novo ok desapareceu tirei apareceu Ele dá uma bugada porque cada vez que eu mexo o mouse dentro do elemento ele ele tá verificando que tá tá mexendo tá sobre né Aí ele fica dando essa aplicadinha ali ó mas para entender o conceito sobre ó tô fazendo desaparecer o elemento ali Beleza então display sendo mostrado não mostrar no display None Will display sendo mostrado Block né Tá Professor demetri mais e na prática o que

como é que a gente usa a questão do display Block do online do noni né como que a gente trabalha com isso aí na prática para que que a gente usa isso daí eu só tava mostrando esses conceitos para você entender o funcionamento dos tipos de layout aqui nós vamos fazer o seguinte pessoal para nós entendermos bem esse conceito eu sei que ele não é tão fácil de entender de primeira mas nós vamos fazer o seguinte nós vamos fazer uma lista e dentro dessa lista nós vamos ter uma lista desordenada com seguintes itens primeiro item

o segundo item e terceiro item Oi beleza Como você pode perceber aqui ó esse tipo de conteúdo 1 l ou l ele tem que tipo de propriedade por padrão pelo que você entendeu Aí do tipo de display que existe se você respondeu Block o bloco você acertou porque ele tá pegando bloquinho Só se eu colocasse aqui só pra gente poder enxergar aqui ó a classe borda Olha só vou colocar aqui no l a classe engorda tá pegando o bloco completo Se eu colocasse em cada ele ó o olá ele tá indo até o final ele

tá pegando cada um desse é como se fosse um bloquinho O Hélio é um bloco e o ele é um bloco certo mas e se eu quisesse que essa listinha aqui ficasse uma do lado da outra e não uma embaixo da outra como se fosse bloquinhos como que eu poderia fazer Oi ó eu posso fazer o seguinte eu posso vir aqui no meu CSS coloca aqui o seletor é Lee e eu vou dizer que o display dele é inline o Ou seja que é um do lado do outro olha só que legal quando eu coloco

display-inline ele vai ficar um do lado do outro e não mais no estilo como ele tava antes em bloco um em cima do outro se eu coloco inline um do lado do outro compreende eu poderia inclusive colocar umas coisinhas aqui né Eu Vou Chamar esse primeiro aqui eu vou colocar classe Azul a segunda vou colocar a classe vermelho e a terceira a classe Verde vamos fazer essas classes aqui então Vamos colocar aqui azul o background Blue e como fazer vermelho é head e vamos fazer é é verde né quer background Green é né vermelho fiz

aqui ai fiz Red o segundo olha só que misturava a beleza mais curte mesmo então Observe o seguinte Agora eu tenho uma do lado da outra tem o vermelho ou azul vermelho verde certo mas eles têm um espaçamento aqui entre um e outro porque será né que eu tenho esse espaçamento entre um e outro se eu não coloquei nenhum tipo de Margem a Pode reparar não tem nenhum tipo de Margem a direita para cada item ó e aqui ainda aparece aqui um como se fosse assim um espaço entre um e tem outro por que que

será que isso acontece ou isso acontece pessoal porque quando a gente transforma um elemento em display-inline ele entende que o conteúdo dele passa se tornar como se fosse palavras isso aqui tem o comportamento como se fosse palavras então por exemplo lá no meu primeiro título título um eu escrevo assim né ó é meu primeiro CSS ta observando aqui ó meu primeiro CSS cada uma dessas palavras tem como se fosse o espaçamento entre elas e ele faz isso por padrão então se eu fizesse assim o meu primeiro CSS e salvar se assim ó ó ia dar

no mesmo porque porque ele ia entender que tem o espaçamento entre palavras certo agora é só colocar se tudo grudado aqui um um grudado no outro como é tudo na mesma linha e ele é obviamente entender que isso é uma palavra só e não ia dar o espaço acontece a mesma coisa quando um elemento de se torna do tipo online ele tá entendendo que cada ele desse daqui é como se tivesse Tornado uma palavra então quando como eu tenho um primeiro ali aqui o segundo a linha aqui o terceiro ali ele tá dando esse espaçamento

entre um e outro como se cada um fosse uma palavra agora olha que curioso se eu pegar esse primeiro ali recortar ele colocar exatamente do ladinho onde acaba o outro Ó coloquei exatamente do ladinho vou fazer a mesma coisa aqui com esse copiei e eu quero colocar exatamente aqui do ladinho Olha o que que vai acontecer e é que o a ele não vai permitir isso né pessoal porque o editor que eu estou usando ele já tenta fazer a formatação já bonitinha nas nossas tags ele não tá permitindo ele já vai fazer a quebra de

mim automático teria que desativar o modo aqui de deixou desativar só para mostrar para vocês aqui das minhas preferências e eu vou desativar para ele formatar que eu vou tirar esses esses dois itens aqui ó o pão eu quero esses dois itens deixa eu colocar eles aqui no bloco de notas Notepad só para depois eu recolocar eles aqui a beleza vou salvar esse aqui só para ele não atualizar o nosso código assim que eu mexer o que que eu vou fazer vou pegar esse ali vou colocar Exatamente do lado da onde outro ela e acabou

e vou pegar esse terceiro ali aqui ó eu vou colocar Exatamente do lado da onde Aquele outro acabou Olha o que que vai acontecer vou a lá parece até uma mágica ele tirou aquela margem porque ele tá entendendo que tudo isso daqui ó tá na mesma linha e é uma palavra só é como se ele encarasse cada um como se fosse uma palavra tá entendendo é assim que o comportamento do display inline ele faz ele vai pegar exatamente o conteúdo do que está dentro daquele elemento dele não sei se você conseguiu compreender é mas vamos

supor que eu quisesse fazer assim um do ladinho do outro mas se cada um também tivesse um comportamento como se fosse de bloco mais um do lado do outro eu quero que seja um meio termo entre um bloco e um do lado do outro como que eu faria isso porque ela se eu quisesse aqui não tivesse imagem aqui o vou ficar são do lado do outro eu tenho um problema porque eu teria que fazer sempre assim grudadinho como se fosse palavras né E outra coisa olha só que interessante no display do tipo online não importa

se eu colocar uma largura ou uma altura ele não vai me obedecer por exemplo se eu colocar que a largura eu quero que cada Élida esse tenha vamos supor 33% do tamanho da minha tela e dei um salvar olha lá não aconteceu absolutamente nada se eu colocar aqui que altura eu quero que tenha 150 pixels Olha o que que vai acontecer absolutamente nada porque esse tipo de display do tipo em linha ele entende que ele vai ficar tudo a linha e o que vai determinar a largura dele é o conteúdo que tá aqui dentro então

pelo conteúdo que ele tem aqui é o que ele vai mostrar para pessoa mas e se eu quisesse que fosse tudo na mesma linha por exemplo na tudo um do lado do outro que nem aqui mas eu quisesse que ele obedecesse essa questão de largura e altura bom essa largura e essa altura a um único componente que obedece é o uso do tipo bloco então por exemplo assim o nosso título um aqui o meu H1 se eu quiser que eu H1 colocando a por exemplo a altura dele de 150 pixels o olá ele me obedece

tá vendo ali ó ele é Aumentou a altura altura dele aqui mas já o tipo inline não Ele não me obedece Então como é que eu faço para ter um meio termo entre os dois Aí surge um tipo de display diferente que a mistura entre os dois que é o display do tipo inline-block que é a mistura do inline com bloco quer dizer ele vai ficar em linha um do lado do outro mas o comportamento dele também vai ser como se fosse de bloco agora olha o que que vai acontecer quando eu quando eu salvar

Olha que legal pessoal ficou um do lado do outro mas herdando essa característica do inline que é ficar um do lado do outro mas agora ele também herdou uma característica do bloco que é de você poderá especificar a largura EA altura assim eu tenho um componente do lado do outro legal isso é muito útil pessoal quando a gente vai fazer os nossos layouts as nossas divs né Por exemplo vamos Apagar tudo isso aqui é só para gente como funciona esse display primeira vez que você escuta eu sei pessoal dar uma bugada na mente mas depois

conforme você vai exercitando e vai precisando dos componentes na prática você vai entendendo certo a gente viu na aula lá de html que a gente usa as dívidas para fazer as divisórias do nosso conteúdo né a gente viu isso na nossa última aula de HTML Então imagina que eu fosse ter três dias tá eu vou colocar aqui uma div daí eu voltei aqui embaixo outra Jimmy ó e aqui embaixo outra de cada um é uma divisória certo e eu vou colocar aqui ó o seguinte nessa primeira diva eu vou colocar ela como sendo a a

classe dela azul já que a gente já fez né as coisinhas Azul essa que vai ser rede e essa daqui vai ser verde mistureba né português com inglês certo então uma vai ser azul uma vai ser verde outra vai ser vermelho não apareceu nada ali porque ou eu apaguei mas é que coisa rapaziada acabei apagando deixa eu dar um controle aqui pelo menos deixasse a questão da borda das cores aqui só vou apagar esses aqui de baixo então já salvei a continuar as bordas ali só que eu preciso ter um conteúdo Dinho aqui então vou

colocar conteúdo e aqui eu vou também colocar conteúdo e conteúdo certo olha o que que acontece eu tenho três divs mas essas dívidas ela se comporta em blocos Mas vamos supor que eu quisesse dividir metal é minha tela em três partes assim um do lado do outro não daria para fazer assim bloco ela porque em bloco ele vai ficar um em cima do outro vai tá pegando a extensão toda certo eu poderia até especificar aqui por exemplo ó eu posso dizer assim a casa de Ive só vai ter uma largura mais de trinta e três

por cento bom e que altura dela e vai ser de a 150 pixels certo Olá beleza ficou assim só que ficou um em cima do outro eu quero que cada um tenha 33% da tela eu queria que ficasse um do lado do outro não vai funcionar porque porque o display padrão da telha do tipo de é bloco então quê que eu vou fazer eu vou colocar aqui um display como inline-block que eu quero que seja tudo na mesma linha mas mantém essas características de bloco olha só o que que vai acontecer beleza ficou assim não

deu certo pessoal ó porque por causa do tamanho da minha tela que tá muito pequenininha não tinha dado o tamanho de 33% aqui certinho agora se eu faço assim eu cresço minha tela já ficou certinho seu maximizá-la cada um vai ocupar 33% posso diminuir assim que já del tamanho ali ele vai pular para baixo se o comportamento normal tá padrão eu votasse um pouquinho menor Vinte por cento aí não ia ter problema e por cento beleza lhe acompanhando Ah entendeu então essa questão do display inline-block que a gente utiliza então para você entender as diferenças

entre os tipos de display e também se a gente quisesse de repente fazer algum elemento desaparecer por exemplo o nosso título um lá a gente poderia usar aquela o display como se é do ryden né Eu quero fazer desaparecer essas minhas divas eu coloco aqui dem não nome que nenhum E aí ele vai desaparecer certo tem um detalhe também bem interessante o pessoal confunde é sobre essa questão de desaparecer um elemento eu tenho três elementos aqui né vamos dizer que eu quero que esse do meio ele desapareça então poderia vir aqui nesse que é do

meio aqui o head vou colocar o estilo direto na pele aqui e vou falar que o display dele vai ser None tá eu quero que ele desapareça o que que vai acontecer como ele sumiu eu arranquei aquele elemento o verde que tava aqui no canto ele colou aqui no azul certo então eu realmente removi por assim dizer com CSS aquele elemento daquele lugar não existe mais ele não vai aparecer mais ali como se ele tivesse sido removido Mas e se eu quisesse fazer ele ficar oculto quer dizer ele desaparecer mas o elemento ainda tá ali

aí a gente poderia usar aqui uma outra tag CSS que se chama visibility a visibilidade e aqui a gente pode colocar idem quer oculta seu colocar a visibilidade oculta Olha o que que vai acontecer não tá aparecendo o meu elemento aqui mas ele tá que ele só não tá sendo mostrado mas ele tá aqui ele tá ocupando aquele espaço da onde ele tava certo então também é só uma diferença do da visibilidade Idem para o display como sendo None display Não beleza então esses são alguns conceitos aqui sobre essa propriedade display pessoal dá uma assistida

novamente nessa aula lembra dos padrões que ela tem porque geralmente quando o nosso layout fica bagunçado e a gente não entendi porque que o componente está lá embaixo enquanto ele deveria estar na mesma linha ou por que que ele não obedece as a gente fica louco quer ver alguma coisa que a gente fica louco a mostrar para vocês quando a gente é iniciante eu vou colocar o link HF vou chamar aqui de botão o botão não é que eu não vai para página nenhuma vou fazer aqui uma classe chamada botão e vou falar que aqui

fazer aqui um botão Beleza então coloquei lá o nosso botão como a gente tava usando aqui o ylai Não repara que que aconteceu ela ficou lá na continuação lá em cima né então eu poderia colocar mais para baixo isso daqui isso tudo a gente poderia colocar dentro de uma div que fosse um bloco Então posso colocar aqui ó só que daí como todos estão em online né pessoal esse aqui vamos Forçar ela ficar com o bloco mesmo colocando direto na tag aqui que ela é do tipo bloco tá ali vó O que é display Block

Oi e a largura dela Vamos colocar aqui como 100% né só para ficar certinho aqui a beleza certinho para nosso botão ficar lá embaixo a gente não tem que ficar ajustando muito nosso layout aqui OK agora vamos supor que eu quero colocar aqui ó eu vou colocar aqui que a classe além de Botão vou colocar borda que é aquela que deixa vermelha né já deixamos com uma borda e eu quero que esse botão eu tenho 11 tamanho então eu vou lá todo felizão vou fazer assim botão vou fazer minha calça e botão isso acontece muito

que é iniciante né vou lá me até de Botão vou até botar o seletor aqui a botão e eu quero que a largura desse meu botão Edit seja de cinquenta por cento porque eu quero que esse botão tem a metade do tamanho da minha tela eu vou lá salvar e e não acontece absolutamente nada só observo não aconteceu absolutamente nada eu fico mais ué como é que pode eu coloquei aqui qualquer a largura não me obedeceu a daí eu quero fazer com que a margem se afaste do de cima eu vou fazer assim margem I

Left left Top né Para a gente afastar eu vou querer que seja 100 pixels afastado do de cima da um salvar aqui e Ué não aconteceu nada que estranha aí você vai lá olha classe botão botão aqui um ar tá tudo certo ele não tá me obedecendo Porque será que não funciona eu quero que esse botão ele tem a uma altura de sei lá 50 pixels e nada funciona Porque será que nada funciona pessoal tem algum palpite porque que não tá dando certo porque que não tá funcionando porque a tag do tipo ah ela tem

o display do tipo inline e o display do tipo online ele só aceita o tamanho do conteúdo exatamente de acordo com que tá aqui dentro do conteúdo por isso se a gente passar um predinho aqui que é um preenchimento ele vai aceitar por exemplo porque ele está preenchendo a 40 agora preencheu ele aceitou isso Beleza mas a largura alto bom então nem margem ele ele também não aceitou então se eu quisesse que isso daqui funcionasse o que que eu teria que fazer o quê que você acha se você pensou em colocar um display como sendo

inline-block você acertou olha só que que vai acontecer agora ele teve o comportamento que eu queria percebeu ele teve a largura de cinquenta por cento a altura de 50 pixels ele deu uma margem 100 pixels da parte de cima me obedeceu e ainda ficou em linha ok Porque eu misturei o em linha com o bloco e agora o texto ele ficou é como se fosse assim grudado na parte de cima agora eu poderia como isso aqui para ele é uma mistura de inline com bloco o inline a gente sabe que ele trata como palavra poderia

colocar o alinhamento do texto e ele vai me obedecer eu por exemplo text-align Center Oi e aí o meu alinhamento do texto ficou certinho então só para você entender porque às vezes você quer trabalhar com elemento e ele parece que não te obedece porque pode ser que ele seja do Spray tipo inline ou do tipo bloco E aí de acordo com que ele for vai acontecer o resultado ou não certinho não se esquenta tá pessoal isso aqui é só para a gente ter uma noção uma ideia sobre a propriedade entendeu os comportamentos que a gente

está conhecendo entendendo quando a gente for fazer projetos reais a gente tiver necessidades aí a gente vai falar uma Lembra daquela aula que a gente viu lá sobre o display Então nesse caso aqui a gente vai precisar aplicar que ela propriedade gente vai explicar para você mas para bem Beleza só para dar uma visão geral que dessa propriedade que é importante cima a propriedade display forte abraço e até a próxima aula até mais Espero que você tenha gostado dessa aula que tenha te ajudado se você quiser continuar assistindo o curso pode continuar clicando no nesses

cards que estão aparecendo aqui deixa o seu e se inscreve no canal para não perder nenhum conteúdo sobre programação web e a gente se vê no próximo vídeo valeu