La propiedad de ancho de CSS define el ancho del área de contenido del elemento. Esta área es el espacio entre el borde, el relleno y el margen de un elemento. Además, la propiedad de ancho CSS con el valor ' ajuste-contenido ” ajustará el ancho del elemento según el contenido.
Este estudio explicará la propiedad de ancho de CSS con el contenido de ajuste de valor.
¿Cómo usar la propiedad de ancho CSS con el valor de contenido de ajuste?
Con el propósito de usar la propiedad de ancho de CSS con valor de contenido de ajuste, consulte la sintaxis dada:
ancho: ajuste-contenido
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. Agregue el elemento
dentro de cada div para agregar contenido a la página web:
< división clase = 'caja color-1' >
< pag > Contenido de ajuste de ancho CSS pag >
división >
< división clase = 'caja color-2' >
< pag > Hola Mundo ! pag >
división >
< división clase = 'caja color-3' >
< pag > El trabajo en equipo comienza por generar confianza. somos un equipo trabajando por una misión común. pag >
divisió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, comprobaremos el comportamiento del ' ancho ” propiedad que tiene el valor “ ajuste-contenido ” en el CSS.
Estilo 'caja' div
.caja {ancho: ajuste-contenido;
altura: 50px;
color: blanco fantasma;
relleno: 6px;
margen: 2px;
tamaño de fuente: 18px;
}
Él ' .caja ” se refiere al cuadro de clase div. A continuación se muestran las propiedades que se le aplican:
-
- “ ancho ” propiedad con el valor “ ajuste-contenido ” 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 un espacio dentro del borde del elemento o alrededor del contenido.
- “ margen ” determina el espacio alrededor del elemento.
- “ tamaño de fuente La propiedad ” determina el tamaño de la fuente.
Estilo 'color-1' div
.color- 1 {color de fondo: #00ABB3;
}
Él ' color de fondo La propiedad ” se establece en “ .color-1 ” div.
Estilo 'color-2' div
.color- 2 {color de fondo: #083AA9;
}
Estilo 'color-3' div
color de fondo: #4C6793;
}
Se puede observar que el ancho del elemento se establece igual al contenido:
¡Eso es genial! Hemos aprendido con éxito el uso del CSS “ ancho ” propiedad con el valor “ ajuste-contenido ”.
Conclusión
La propiedad de ancho de CSS nos permite utilizar varios valores. Estos valores son en porcentaje, píxeles o más. Para configurarlo según el contenido, el botón “ ajuste-contenido Se puede establecer el valor ”. Esta publicación ha descrito la propiedad de ancho de CSS con el contenido de ajuste de valor con una demostración práctica.