Neste artigo, discutiremos a propriedade dos elementos do bloco embutido. É uma propriedade muito útil do CSS. Podemos aplicá-lo a várias tags. Faz parte da propriedade de exibição CSS.
estrutura de coleções java
Uso:
display: inline-block
Ao aplicar a propriedade acima, o elemento se comportará como inline e bloqueará seus elementos filhos. Vamos entender os elementos inline e block.
Elementos embutidos
Os elementos que não começam em uma nova linha são conhecidos como elementos embutidos. Eles são combinados como parte do texto principal e não como uma ação separada. Esses elementos ocupam apenas o espaço necessário. Espaços à esquerda e à direita podem ser adicionados a um elemento embutido, mas não pode ser adicionada altura ao preenchimento superior ou inferior ou à margem de um elemento embutido.
Exemplo de elementos embutidos:
Exemplo:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Saída:
contagem sql distinta
Elementos de bloco
Os elementos que começam em uma nova linha são conhecidos como elementos de bloco. Um elemento de bloco ocupa toda a largura disponível para aquele conteúdo. Ao contrário do inline, existe uma margem superior e inferior para esses elementos. Elementos em nível de bloco só podem aparecer dentro da tag body. Os elementos em nível de bloco criam uma estrutura maior que os elementos embutidos.
Exemplo de elementos de bloco:
,
classificando um arraylist java
Exemplo:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Saída:
ponteiro em c
Elementos de bloco embutidos
O valor de exibição de inline-block funciona de forma semelhante a inline com uma exceção: a altura e a largura desse elemento tornam-se modificáveis.
Exemplo:
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Saída:
Abaixo está o arquivo de saída usando todos os elementos em uma página:
Código
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>