Cómo establecer el ancho y la altura del tramo en CSS

En HTML, SPAN es un contenedor en línea utilizado para el contenido de textura y el estilo. Pero no puede establecer el ancho y la altura del tramo como se establece normalmente para los otros elementos HTML. En tal escenario, use el "mostrar"Propiedad de CSS y luego establece el ancho y la altura del tramo de acuerdo con sus requisitos.

En este manual, discutiremos cómo ajustar la altura y el ancho de un tramo en CSS.

¿Qué es la propiedad de "pantalla" en CSS??

El "mostrarLa propiedad se utiliza para establecer el comportamiento de visualización del elemento HTML. Esta propiedad CSS se puede utilizar para especificar si un elemento debe tratarse como en línea o bloque o para establecer el diseño de sus hijos. Para ser más específico, puede utilizarlo para ajustar el ancho y la altura del tramo en CSS.

Sintaxis

La sintaxis de la propiedad de visualización es:

Pantalla: bloque | bloque en línea

Aquí está la descripción de los valores anteriores:

• bloquear: Se usa para establecer el ancho y la altura del elemento.
• bloque en línea: Se usa para establecer los márgenes y el relleno del elemento.

Ahora, avance a los ejemplos en los que estableceremos el ancho y la altura del tramo utilizando el bloque y los valores de bloque en línea de la propiedad de visualización.

Ejemplo 1: Configuración de ancho y altura del tramo usando "bloque"

Para establecer el ancho y la altura del tramo, primero cree un tramo en HTML usando la etiqueta:

Html

Ancho y altura del tramo

En CSS, establezca el ancho y la altura del tramo usando el "mostrar" propiedad. Para hacerlo, use el "durar"Para acceder a él. Después de eso, establezca el valor de la propiedad de visualización como "bloquear"Y su ancho y altura como"400px" y "150px". Además, establezca el color de fondo del tramo como "RGB (11, 235, 243)"Y el borde del lapso como"5px" ancho, "sólido"Forma, y"RGB (47, 0, 255)" color.

CSS

durar
bloqueo de pantalla;
Ancho: 400px;
Altura: 150px;
Antecedentes: RGB (11, 235, 243);
borde: 5px sólido RGB (47, 0, 255);

Como puede ver, hemos establecido con éxito el ancho y la altura del tramo en CSS:

Pasemos al siguiente ejemplo

Ejemplo 2: Ajuste de ancho y altura del tramo utilizando "bloque en línea"

En este ejemplo, usaremos el "bloqueo en línea"Valor de la propiedad de visualización para ajustar la altura y el ancho del tramo.

Para este propósito, crearemos un tramo en el HTML igual que el ejemplo anterior, y luego pasaremos al CSS y estableceremos el valor de la propiedad de visualización como "bloqueo en línea"Y establece el ancho y la altura del tramo como"400px" y "150px". Además, establezca el color de fondo del tramo como "RGB (209, 173, 95)"Y el borde del lapso como"5px","sólido", y "RGB (255, 166, 0)":

durar
Pantalla: bloque en línea;
Ancho: 400px;
Altura: 150px;
Antecedentes: RGB (209, 173, 95);
borde: 5px sólido RGB (255, 166, 0);

Esto nos dará el siguiente resultado:

De los ejemplos dados anteriormente, se puede observar que utilizando el "bloquear" y "bloqueo en línea"Valores de la propiedad de visualización, las propiedades de altura y ancho de CSS se pueden ajustar.

Conclusión

Mediante el uso de la propiedad de la pantalla "bloquear" y "bloqueo en línea"Valores, la altura y el ancho del tramo se pueden ajustar. Puede utilizar uno de ellos de acuerdo con su elección; Ambos dan el mismo resultado. En este manual, hemos explicado el procedimiento relacionado con la configuración del ancho y la altura del tramo utilizando la propiedad de pantalla CSS.