Como definir a largura e a altura do span no CSS

No HTML, o SPAN é um contêiner embutido usado para textura e estilizando -os. Mas você não pode definir a largura e a altura do período como normalmente definido para os outros elementos HTML. Nesse cenário, use o “mostrarPropriedade do CSS e, em seguida, defina a largura e a altura do período de acordo com seus requisitos.

Neste manual, discutiremos como ajustar a altura e a largura de um período em CSS.

O que é a propriedade "Display" no CSS?

O "mostrar”A propriedade é usada para definir o comportamento de exibição do elemento HTML. Esta propriedade CSS pode ser utilizada para especificar se um elemento deve ser tratado como embutido ou bloqueado ou para definir o layout de seus filhos. Para ser mais específico, você pode utilizá -lo para ajustar a largura e a altura da extensão no CSS.

Sintaxe

A sintaxe da propriedade Display é:

Exibir: Bloco | Bloco em linha

Aqui está a descrição dos valores acima:

• bloquear: É usado para definir a largura e a altura do elemento.
• Block inline: É usado para definir as margens e o preenchimento do elemento.

Agora, vá para os exemplos em que definiremos a largura e a altura do período usando os valores de bloco e bloco embutido da propriedade Display.

Exemplo 1: Configurando a largura e a altura do span usando "bloco"

Para definir a largura e a altura do período, primeiro crie um período em HTML usando a tag:

Html

Largura e altura do span

No CSS, defina a largura e a altura do período usando o “mostrar" propriedade. Para fazer isso, use o “período”Para acessar. Depois disso, defina o valor da propriedade de exibição como “bloquear”E sua largura e altura como“400px" e "150px”. Além disso, defina a cor de fundo do período como “RGB (11, 235, 243)”E a fronteira do período como“5px" largura, "sólido"Forma e"RGB (47, 0, 255)" cor.

CSS

período
exibição: bloco;
Largura: 400px;
Altura: 150px;
Antecedentes: RGB (11, 235, 243);
borda: 5px RGB sólido (47, 0, 255);

Como você pode ver, definimos com sucesso a largura e a altura da extensão no CSS:

Vamos mudar para o próximo exemplo

Exemplo 2: Configurando a largura e a altura do span usando "Block Inline"

Neste exemplo, usaremos o “Block inline”Valor da propriedade Display para ajustar a altura e a largura do período.

Para esse fim, criaremos uma extensão no HTML igual ao exemplo anterior e depois passaremos para o CSS e definirá o valor da propriedade de exibição como “Block inline”E defina a largura e a altura do período como“400px" e "150px”. Além disso, defina a cor de fundo do período como “RGB (209, 173, 95)”E a fronteira do período como“5px","sólido", e "RGB (255, 166, 0)”:

período
Exibição: bloco embutido;
Largura: 400px;
Altura: 150px;
Antecedentes: RGB (209, 173, 95);
borda: 5px RGB sólido (255, 166, 0);

Isso nos dará o seguinte resultado:

De cima de exemplos acima, pode -se observar que o uso do “bloquear" e "Block inline”Valores da propriedade Display, as propriedades de altura e largura do CSS podem ser ajustadas.

Conclusão

Usando a propriedade de exibição “bloquear" e "Block inlineValores, a altura e a largura do período podem ser ajustadas. Você pode utilizar um deles de acordo com sua escolha; Ambos dão o mesmo resultado. Neste manual, explicamos o procedimento relacionado a definir a largura e a altura do período usando a propriedade CSS Display.