Propiedad de ancho CSS

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *