A veces, puede ser difícil diseñar sitios web que se ven bien en una variedad de dispositivos. HTML proporciona varias propiedades para establecer el tamaño y la posición del elemento para resolver algunos problemas receptivos. Las propiedades más comunes son las "ancho" y "altura". Estas propiedades se utilizan para especificar el tamaño del elemento. Además, podemos utilizar las propiedades máximas de altura máxima, max-ancho, mínimo de algodón y mínimo para resolver problemas relacionados con la capacidad de respuesta.

Esta publicación cubrirá:

• Cómo ajustar la altura máxima del elemento con CSS?
• Cómo ajustar la altura mínima del elemento con CSS?
• Cómo ajustar el ancho mínimo del elemento con CSS?
• Cómo ajustar el ancho máximo del elemento con CSS?

Requisito previo: Crear archivo HTML

Primero, cree un archivo HTML siguiendo los pasos mencionados a continuación:

• Agrega un ""Elemento con el nombre de la clase"principal".
• Dentro de esto, agregue dos ""Elementos con el nombre de la clase"diseño-img" y "diseño-contenido", Respectivamente.
• El "" elemento que tiene clase "Layout-IMG" contiene el ""Elemento asociado con el"SRC"Atributo, que especifica la URL de la imagen y el"ancho"Atributo para definir el ancho del elemento.
• El elemento "" con "diseño-contenido"Tiene un"

  " y "

  "Elementos para el encabezado y el párrafo.

Aquí está el código HTML:

Aprende con nosotros

La propiedad de "ancho" se utiliza para establecer el ancho del elemento.
Se utiliza la propiedad de "altura" para configurar la altura del elemento.

En la próxima sección, aprenderemos a determinar la altura y el ancho de los elementos HTML utilizando CSS.

Clase de estilo "principal" de estilo

Primero, acceda a la principal ""Contenedor con la ayuda del atributo de clase".principal". Luego, aplique las siguientes propiedades CSS:

.principal
Ancho: 300px;
Altura: 360px;
margen: auto;
tamaño de fuente: 20px;
borde: 1px sólido RGB (237, 234, 234);
Border-Radius: 20px;
Color de fondo: RGB (235, 235, 235);

Aquí están las propiedades de estilo CSS que se aplican en el DIV principal:

• "ancho"Determina el ancho del elemento.
• "altura"Establece la altura del elemento.
• "margen"Agrega espacios a cada lado del elemento.
• "tamaño de fuente"Ajusta el tamaño de la fuente.
• "bordeLa propiedad se aplica para establecer un borde alrededor del elemento. Contiene los valores para el ancho del borde, el estilo y el color.
• "radio fronterizo"La propiedad hace que los bordes del elemento reduzcan.
• "color de fondo"Aplica el color de fondo del elemento.

Producción

Clase de estilo "Diseño-contenido"

.diseño-contenido
relleno: 0 10px;
Color de fondo: RGB (233, 179, 112);

El "" Tener clase "diseño-contenido"Está diseñado con el"relleno"Propiedad que agrega espacio alrededor del contenido del elemento.

Producción

Cómo ajustar la altura máxima del elemento en CSS?

El "Altura máxima"La propiedad determina la altura máxima del elemento. El contenido se desbordará si excede la altura máxima.

En CSS, especifique la altura máxima del elemento "" que tiene un "diseño-contenido"Clase especificando el"Altura máxima" propiedad:

Max-Alta: 100px;

Producción

Cómo ajustar la altura mínima del elemento en CSS?

El "mínimo"La propiedad ajusta la altura mínima del elemento. Se aplicará si el contenido del elemento es menor que la altura mínima. No tiene ningún efecto si el contenido excede la altura mínima.

Añade el "mínimo"Propiedad para la clase"diseño-contenido"Para especificar la altura mínima del elemento:

Min-altura: 100px;

Producción

Cómo ajustar el ancho mínimo del elemento en CSS?

El CSS "mínimo"La propiedad determina el ancho mínimo del elemento. El "mínimo"Se aplica al elemento si el contenido es menor que el ancho mínimo del elemento. No mostrará ningún efecto si el contenido excede el ancho mínimo.

Añade el "mínimo"Propiedad a la clase" Layout-Content "para ver cómo afecta:

Min-Width: 310px;

Producción

Cómo ajustar el ancho máximo del elemento en CSS?

CSS "anchura máximaSe utiliza la propiedad para determinar el ancho máximo del elemento. Podemos decir que tiene un ancho de elemento fijo. Si el contenido excede el ancho del elemento, su contenido se desbordará. Como resultado, la altura cambiará automáticamente.

Añade el "anchura máxima"Propiedad con el valor"230px"Para ver su efecto:

MAX-A-ACUERDO: 230PX;

Producción

Hemos aprendido a especificar las propiedades de ancho y altura de los elementos utilizando CSS.

Conclusión

Para establecer la altura y el ancho del elemento HTML, el CSS "altura" y "anchoSe utilizan las propiedades. Estos CSS "mínimo","anchura máxima","mínimo", y "Altura máximaLas propiedades se utilizan para limitar el ancho y la altura del elemento en relación con el elemento principal. Este artículo ha demostrado los métodos para limitar el tamaño del elemento utilizando las propiedades CSS.