Contenido de ajuste de ancho CSS

La propiedad de ancho CSS define el ancho del área de contenido del elemento. Esta área es el espacio entre el borde, el acolchado y el margen de un elemento. Además, la propiedad de ancho CSS con el valor "contenido de ajuste"Ajustará el ancho del elemento de acuerdo con el contenido.

Este estudio explicará la propiedad de ancho CSS con el valor de ajuste de valor.

Cómo usar la propiedad de ancho CSS con valor de contenido de ajuste?

Con el fin de usar la propiedad de ancho CSS con valor de contenido de ajuste, consulte la sintaxis dada:

Ancho: contenido de ajuste

Ejemplo

En HTML, agregue tres elementos Div con el mismo nombre de clase "caja"Y tres clases diferentes"color-1","color-2", y "color-3", Respectivamente. Agregar

Elemento dentro de cada DIV para agregar contenido a la página web:

Contenido de ajuste de ancho CSS

Hola Mundo!

El trabajo en equipo comienza construyendo confianza. Somos un equipo que trabaja para una misión común.

Aquí está la salida del código HTML:

Hasta ahora, hemos discutido la página HTML. Ahora, en la siguiente sección, aplicaremos diferentes estilos CSS a los elementos HTML para que se vean mejor. En el ejemplo en curso, verificaremos el comportamiento del "ancho"Propiedad que tiene el valor"contenido de ajuste"En el CSS.

Estilo "Box" Div

.caja
Ancho: Fit-Content;
Altura: 50px;
Color: Ghostwhite;
relleno: 6px;
margen: 2px;
tamaño de fuente: 18px;

El ".caja"Se refiere al cuadro de clase Div. A continuación se muestran las propiedades que se aplican:

• • "ancho"Propiedad con el valor"contenido de ajuste"Utiliza el espacio disponible, pero no excederá el contenido.
  • "altura"Es la propiedad que determina la altura del elemento.
  • "color"Define el color de fuente del elemento.
  • "relleno"La propiedad produce espacio dentro del borde del elemento o alrededor del contenido.
  • "margen"Determina el espacio alrededor del elemento.
  • "tamaño de fuenteLa propiedad determina el tamaño de la fuente.

Estilo "Color-1" Div

.color-1
Color de fondo: #00ABB3;

El "color de fondo"La propiedad está establecida en el".color-1"Div.

Estilo "Color-2" Div

.color-2
Color de fondo: #083AA9;

Estilo "Color-3" Div

.color-3
Color de fondo: #4C6793;

Se puede observar que el ancho del elemento se establece igual al contenido:

Genial! Hemos aprendido con éxito el uso del CSS "ancho"Propiedad con el valor"contenido de ajuste".

Conclusión

La propiedad de ancho CSS nos permite utilizar varios valores. Estos valores están en porcentaje, píxeles o más. Para configurarlo de acuerdo con el contenido, el "contenido de ajuste"Se puede establecer el valor. Esta publicación ha descrito la propiedad de ancho CSS con el contenido de ajuste de valor con una demostración práctica.