La propiedad de ancho en CSS se usa para establecer el ancho del texto, las imágenes. El ancho se puede asignar al texto y las imágenes en forma de píxeles (px), porcentaje (%), centímetro (cm), etc. La propiedad de ancho no contiene relleno, bordes ni márgenes. La propiedad de ancho se reemplaza por las propiedades de ancho mínimo y ancho máximo . La propiedad de ancho, de forma predeterminada, establece el ancho del área de contenido, aunque si el valor del tamaño del cuadro se establece en border-box, establecerá el ancho del área del borde.
Sintaxis:
width: auto | value | initial | inherit;
Nota: La propiedad de ancho para el elemento no implica el relleno, el borde y el margen.
Valor por defecto: Su valor por defecto es automático.
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
auto: se utiliza para establecer la propiedad de ancho en su valor predeterminado. Si la propiedad de ancho se establece en automático, el navegador calcula el ancho del elemento.
Sintaxis:
width: auto;
Ejemplo: este ejemplo demuestra el uso de la propiedad de ancho cuyo valor se establece en automático.
HTML
<!DOCTYPE html> <html> <head> <title> CSS width Property </title> <style> .gfg { width: auto; color: white; font-size: 20px; background-color: rgb(0, 150, 0); } h2 { font-size: 20px; color: black; } </style> </head> <body> <h2> CSS width Property </h2> <p class="gfg"> This is an example of auto width property </p> </body> </html>
Producción:
valor: se utiliza para establecer el ancho en forma de píxeles (px), porcentaje (%), centímetro (cm), etc. El ancho no puede ser negativo.
Sintaxis:
width: value;
Ejemplo: este ejemplo demuestra el uso de la propiedad de ancho cuyo valor se puede definir en píxeles (px), porcentaje (%), centímetro (cm), etc.
HTML
<!DOCTYPE html> <html> <head> <title> CSS Width Property </title> <style> .gfg { width: 150px; color: white; font-size: 20px; background-color: RGB(0, 150, 0); } .gfg1 { width: 50%; color: white; font-size: 20px; background-color: RGB(0, 200, 0); } h2 { color: black; } </style> </head> <body> <h2> CSS width Property </h2> <p class="gfg"> An example of width property in form of pixels. </p> <p class="gfg1"> An example of width property in form of percentage. </p> </body> </html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado.
Sintaxis:
width: initial;
Ejemplo: Este ejemplo demuestra el uso de la propiedad de ancho cuyo valor se establece en la inicial.
HTML
<!DOCTYPE html> <html> <head> <title> CSS Width Property </title> <style> .gfg { width: initial; color: white; font-size: 20px; background-color: RGB(0, 150, 0); } h2 { color: black; } </style> </head> <body> <h2> CSS width Property </h2> <p class="gfg"> An example of width property for its initial width value. </p> </body> </html>
Producción:
heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
Navegadores compatibles:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Safari 1.0
- Ópera 3.5
Publicación traducida automáticamente
Artículo escrito por snigdha_yambadwar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA