CSS korkeus ja leveys

Tämän elementin leveys on 100 prosenttia.

CSS aseta korkeus ja leveys

height ja width Atribuutti asettaa elementin korkeuden ja leveyden.

height ja width -attribuutit eivät sisällä sisennyksiä, reunaviivoja tai ulkopakkausta. Ne asettavat elementin sisennykset, reunaviivat ja ulkopakkausalueen korkeuden tai leveyden.

CSS korkeus ja leveys arvot

height ja width Atribuutti voi asettaa seuraavat arvot:

  • auto - Oletus. Selain laskee korkeuden ja leveyden.
  • length - Määritä korkeus/leveys pituusarvolla (esim. px, cm jne.).
  • % - Määritä korkeus/leveys sisällön osuudella.
  • initial - Aseta korkeus/leveys oletusarvoon.
  • inherit - Perii korkeuden/leveyden vanhemmalta.

CSS korkeus ja leveys esimerkki

Tämän elementin korkeus on 200 pikseliä ja leveys 50 %

Esimerkki

Aseta <div>-elementin korkeus ja leveys:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Kokeile itse

Tämän elementin korkeus on 100 pikseliä ja leveys 500 pikseliä.

Esimerkki

Aseta toisen <div>-elementin korkeus ja leveys:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Kokeile itse

Huomioitavaa:Muista:height ja width Atribuutti ei sisällä sisennyksiä, reunaviivoja tai ulkopakkausta! Ne asettavat elementin sisennykset, reunaviivat ja ulkopakkausalueen korkeuden/leveyden!

Aseta max-width

max-width Atribuutti asettaa elementin suurimman leveyden.

voidaan määrittää max-width (suurin leveys) pituusarvolla (esim. px, cm jne.) tai sisällön osuudella (％), tai sitä voidaan asettaa none (oletusarvo. Tarkoittaa, että ei ole suurinta leveyttä).

Kun selainikkuna on pienempi kuin elementin leveys (500px), tapahtuu edellinen <div> ongelmaa. Tämän jälkeen selain lisää horisontaalisen vierityspalkin sivulle.

Tässä tapauksessa käytetään max-width Voisi parantaa selaimen käsittelemistä pienissä ikkunoissa.

Vinkki:Vedä selainikkuna pienemmälle kuin 500px leveys nähdäksesi kahden div:n välinen ero!

Tämän elementin korkeus on 100 pikseliä ja suurin leveys 500 pikseliä.

Tämän elementin korkeus on 100 pikseliä ja suurin leveys 500 pikseliä.

Huomautus:max-width Atribuutin arvo korvaa width（leveys）。

Esimerkki

Tämä <div>-elementin korkeus on 100 pikseliä ja suurin leveys 500 pikseliä:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Kokeile itse

Lisää esimerkkejä

Aseta elementin korkeus ja leveys
Tämä esimerkki näyttää, kuinka asetetaan eri elementtien korkeus ja leveys.
Aseta kuvan korkeus ja leveys prosenttiosuudella
Tämä esimerkki näyttää, kuinka asetetaan kuvan korkeus ja leveys prosenttiosuudella.
Aseta elementin pienin ja suurin leveys
Tämä esimerkki näyttää, kuinka asetetaan elementin pienin ja suurin leveys pikseliarvoilla.
Aseta elementin pienin ja suurin korkeus
Tämä esimerkki näyttää, miten asetetaan elementin pienin ja suurin korkeus pikseleillä.

Aseta CSS-kokoonpano-ominaisuudet

Ominaisuus Kuvaus
height Aseta elementin korkeus.
max-height Aseta elementin suurin korkeus.
max-width Aseta elementin suurin leveys.
min-height Aseta elementin pienin korkeus.
min-width Aseta elementin pienin leveys.
width Aseta elementin leveys.