A volte, può essere difficile progettare siti Web che sembrano buoni su una varietà di dispositivi. HTML fornisce diverse proprietà per impostare le dimensioni e la posizione dell'elemento per risolvere alcuni problemi reattivi. Le proprietà più comuni sono le "larghezza" E "altezza". Queste proprietà vengono utilizzate per specificare la dimensione dell'elemento. Inoltre, possiamo utilizzare le proprietà massime-altezza, massima-larghezza, min-altezza e larghezza minima per risolvere i problemi relativi alla reattività.

Questo post coprirà:

• Come regolare l'altezza massima dell'elemento con CSS?
• Come regolare l'altezza minima dell'elemento con CSS?
• Come regolare la larghezza minima dell'elemento con CSS?
• Come regolare la larghezza massima dell'elemento con CSS?

Prerequisito: Crea file HTML

Innanzitutto, crea un file HTML seguendo i passaggi indicati di seguito:

• Aggiungere un ""Elemento con il nome della classe"principale".
• All'interno di questo, aggiungi due ""Elementi con il nome di classe"layout-img" E "layout-content"Rispettivamente.
• L'elemento "" con classe "Layout-IMG" contiene il ""Elemento associato al"src"Attributo, che specifica l'URL dell'immagine e"larghezza"Attributo per definire la larghezza dell'elemento.
• L'elemento "" con "layout-content"Ha un"

  " E "

  "Elementi per l'intestazione e il paragrafo.

Ecco il codice HTML:

Impara con noi

La proprietà "larghezza" viene utilizzata per l'impostazione della larghezza dell'elemento.
La proprietà "altezza" viene utilizzata per impostare l'altezza dell'elemento.

Nella sezione imminente, impareremo a determinare l'altezza e la larghezza degli elementi HTML usando CSS.

Classe "principale" di stile

Innanzitutto, accedi al principale ""Container con l'aiuto dell'attributo di classe".principale". Quindi, applica le seguenti proprietà CSS:

.principale
larghezza: 300px;
Altezza: 360px;
Margine: auto;
Font-size: 20px;
bordo: 1px solido RGB (237, 234, 234);
raggio di confine: 20px;
Background-color: RGB (235, 235, 235);

Ecco le proprietà di stile CSS che vengono applicate sul div principale:

• "larghezza"Determina la larghezza dell'elemento.
• "altezza"Imposta l'altezza dell'elemento.
• "margine"Aggiunge spazi su ogni lato dell'elemento.
• "dimensione del font"Regola la dimensione del carattere.
• "confine"La proprietà viene applicata per impostare un bordo attorno all'elemento. Contiene i valori per la larghezza, lo stile e il colore del bordo.
• "raggio di confine"La proprietà rende i bordi dell'elemento.
• "colore di sfondo"Applica il colore di sfondo dell'elemento.

Produzione

Classe "Content layout" di stile

.layout-content
imbottitura: 0 10px;
Background-color: RGB (233, 179, 112);

Il "" con classe "layout-content"È disegnato con il"imbottitura"Proprietà che aggiunge spazio attorno al contenuto dell'elemento.

Produzione

Come regolare l'altezza massima dell'elemento in CSS?

IL "altezza massima"La proprietà determina l'altezza massima dell'elemento. Il contenuto traboccerà se supera l'altezza massima.

In CSS, specificare l'altezza massima dell'elemento "" con un "layout-content"Classe specificando il"altezza massima" proprietà:

Max-Height: 100px;

Produzione

Come regolare l'altezza minima dell'elemento in CSS?

IL "Min-height"La proprietà regola l'altezza minima dell'elemento. Verrà applicato se il contenuto dell'elemento è inferiore all'altezza minima. Non ha alcun effetto se il contenuto supera il minimo.

Aggiungi il "Min-height"Proprietà alla classe"layout-content"Per specificare l'altezza minima dell'elemento:

Min-Height: 100px;

Produzione

Come regolare la larghezza minima dell'elemento in CSS?

Il CSS "larghezza min"La proprietà determina la larghezza minima dell'elemento. IL "larghezza min"Viene applicato all'elemento se il contenuto è inferiore alla larghezza minima dell'elemento. Non mostrerà alcun effetto se il contenuto supera la larghezza minima.

Aggiungi il "larghezza min"Proprietà alla classe" layout-content "per vedere come influisce:

Min-Width: 310px;

Produzione

Come regolare la larghezza massima dell'elemento in CSS?

CSS "larghezza massima"La proprietà viene utilizzata per determinare la larghezza massima dell'elemento. Possiamo dire che ha una larghezza di elemento fisso. Se il contenuto supera la larghezza dell'elemento, il suo contenuto traboccerà. Di conseguenza, l'altezza cambierà automaticamente.

Aggiungi il "larghezza massima"Proprietà con il valore"230px"Per vedere il suo effetto:

Licromra massima: 230px;

Produzione

Abbiamo imparato come specificare le proprietà di larghezza e altezza degli elementi usando CSS.

Conclusione

Per impostare l'altezza e la larghezza dell'elemento HTML, il CSS "altezza" E "larghezza"Le proprietà sono utilizzate. Questi CSS “larghezza min","larghezza massima","Min-height", E "altezza massima"Le proprietà vengono utilizzate per limitare la larghezza e l'altezza dell'elemento rispetto all'elemento genitore. Questo articolo ha dimostrato i metodi per limitare le dimensioni dell'elemento usando le proprietà CSS.