CSS Bloco embutido
Este blog o guiará sobre o CSS Inline e Block Elements Display. Então, vamos começar!
Quais são os valores de propriedades do CSS exibem?
Três valores da propriedade CSS Display estão listados abaixo:
- bloquear: Os elementos do bloco começam em uma nova linha e preenchem toda a largura, da esquerda para a direita.
- em linha: Os elementos embutidos aparecem na mesma linha.
- Block inline: O valor da propriedade em linha em linha é como o valor em linha, mas fornece propriedades de margem e preenchimento ao elemento também.
Vamos elaborar em cada um deles através de um exemplo um por um!
Exemplo
No arquivo html, adicione
elemento para fornecer conteúdo ao navegador da web.
Html
Melhores tutoriais do CSS
Propriedade de exibição: bloco
O "bloquear”A tela leva o elemento à nova linha e ocupa toda a largura da página. Se você deseja alterar seu tamanho, utilize as propriedades de largura e altura do CSS.
Agora, no CSS, aplique o “mostrar”Valor da propriedade definido como“bloquear”Para o parágrafo adicionado e atribuir o“fronteira" como "5px RGB sólido (204, 13, 172)”. A fronteira significará o comportamento das propriedades de exibição.
CSS
A imagem abaixo fornecida indica o comportamento da propriedade de exibição do bloco, como descrevemos acima:
Propriedade de exibição: embutido
O "em linha”A propriedade não leva o elemento para a próxima linha, e qualquer uma das propriedades de largura e altura não afetará esta propriedade.
No CSS, agora atribuiremos o “mostrar”Valor da propriedade como“em linha”.
CSS
exibição: embutido;A imagem abaixo é dada indica que o texto está embutido:
Propriedade de exibição: bloco em linha
Este valor funciona da mesma forma que o valor de exibição em linha. A diferença é que esta propriedade de exibição pode ser alterada usando propriedades de margem e preenchimento. Além disso, você também pode definir seus valores de largura e altura de acordo com suas preferências.
CSS
Exibição: bloco embutido;Abaixo está a imagem, que mostra o elemento de bloco embutido sem qualquer propriedade de largura e altura:
Para ver a clara diferença entre tela embutida e embutida. Vamos ver através de um exemplo prático.
Exemplo: diferença entre o bloqueio embutido e em linha
Na seção de código abaixo mencionada, adicionamos um parágrafo usando
marcação. Dentro deste elemento, colocamos dois “"Com a classe"x”E classe“y”.
Observação: é por padrão um elemento embutido.
Html
Css- cascading = "x"> estilo = "y"> folha descreve como os elementos HTML devem ser exibidos na tela.
Na seção CSS, atribuiremos o valor da propriedade Display da classe X como “em linha”Enquanto classe Y com o valor“Block inline”. Observe que todas as outras propriedades de estilo são aplicadas a ambas as classes da mesma forma.
CSS
Na imagem abaixo fornecida, você pode ver a clara diferença nas duas classes, a primeira está embutida e a segunda é exibida em um bloco em linha:
Lista de alguns elementos HTML em linha, bloqueio e bloqueio embutido
Muitos dos elementos HTML são, por padrão, em linha, bloqueio ou bloqueio embutido. Alguns deles estão listados abaixo:
Elementos embutidos HTML
- período
- a
- img
Elementos de bloco HTML
- p
- li
- div
- H1
- seção
Elementos HTML em linha embutida
- botão
- entrada
- Textarea
- Selecione
Discutimos o comportamento dos elementos HTML em linha, bloco e bloqueio embutido.
Conclusão
A propriedade CSS exibe controla o layout dos elementos. Esta propriedade CSS pode ser utilizada com três valores, em linha, bloco e bloco embutido. Cada valor representa um comportamento diferente. Mais especificamente, o valor da propriedade em linha em linha é semelhante ao valor embutido, mas fornece propriedades de margem e preenchimento ao elemento também. Neste artigo, explicamos a propriedade do CSS com exemplos.