La altura y la anchura en CSS

CSS | Propiedades Height y Width : Aquí, vamos a aprender acerca de la altura y propiedades de ancho en el CSS .

El altura y anchura propiedades que permiten a conjunto la altura y las propiedades de ancho de un elemento .

altura y anchura propiedades son cruciales class cualquier sitio web, ya que ayuda en la toma de los sitios web más eficiente con el espacio y, además añade más a los estilos del sitio también.

La altura y propiedades de ancho hacen no class cualquier relleno , márgenes o fronteras en vez influyen en el relleno, márgenes y fronteras del elemento.

Sintaxis:

    Element{
height: 200px/60%
width: 200px/70%
}

Ejemplo:

<!DOCTYPE html>
<title>heading</title>
<style>
div {
height: 200px;
width: 60%;
background-color: lightblue;
}
</style>
<div>
The div has height and weight property.
</div>

salida

El div tiene altura y peso propiedad.

Height and Width in CSS - 4

La altura y la anchura pueden tener el siguiente conjunto de valores:

  • auto – Este es un valor class. El propio navegador calcula la altura y la anchura
  • longitud -Es ayuda en la definición de la altura / anchura en px, cm, etc
  • % – Ayuda en la definición de la altura / anchura en porcentaje del bloque de contención
  • inicial – Esto ajusta la altura / anchura a su valor for
  • hereda – la altura y la anchura se heredan de su valor padre

Ajuste de la anchura de max y max-height :

el max-anchura y max-height propiedades se utilizan para establecer la anchura máxima y la altura de un elemento.

Las propiedades se pueden especificar en px, cm o por ciento.

Usando ancho máximo y max-height el navegador con pequeñas ventanas puede ser manejado más cuidadosamente.

Ejemplo:

<!DOCTYPE html>
<title>heading</title>
<style>
div {
max-height: 100px;
max-width: 95px;
background-color: green;
}
</style>
<div>
The div has 'max-height' and 'max-width' applied.
</div>

de salida:

El div tiene ‘max-height’ y ‘max-width’ aplicado.

Height and Width in CSS - 5

Ajuste de la min-width y min-altura

Esto ayuda en limitar la anchura y la altura de un elemento a un valor mínimo.

Ejemplo:

<!DOCTYPE html>
<title>heading</title>
<style>
div {
min-height: 390px;
min-width: 95px;
background-color: red;
}
</style>
<div>
The div has 'min-height' and 'min-width' applied.
</div>

salida

El div tiene ‘min-height’ y ‘min-width’ aplicado.

Height and Width in CSS - 6

Algunas propiedades de dimensión CSS

Propiedad
Descripción

altura Establece la altura de un elemento
min-altura Establece la altura mínima de un elemento
max-height Establece la altura máxima de un elemento
anchura Establece la anchura de una elemento
max-anchura Establece el ancho máximo de un elemento
min-width Establece el ancho mínimo de un elemento


Deja un comentario

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