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