To znači visinu. CSS - Visina okvira u odnosu na njegovu širinu. Značajke izračuna širine i visine

The visina CSS svojstvo određuje visinu elementa. Svojstvo prema zadanim postavkama definira visinu područja sadržaja. Međutim, ako je veličina okvira postavljena na granični okvir, umjesto toga određuje visinu graničnog područja.

Izvor za ovaj interaktivni primjer pohranjen je u GitHub repozitorij. Ako "želite doprinijeti projektu interaktivnih primjera, klonirajte https://github.com/mdn/interactive-examples i pošaljite nam zahtjev za povlačenje.

Svojstva min-height i max-height nadjačavaju visinu.

Sintaksa

/ * Vrijednost ključne riječi * / visina: auto; / * vrijednosti * / visina: 120px; visina: 10em; / * Vrijednost * / visina: 75%; / * Globalne vrijednosti * / visina: naslijediti; visina: početna; visina: nepostavljena;

vrijednosti

CSS tip podataka predstavlja vrijednost udaljenosti. Duljine se mogu koristiti u brojnim CSS svojstvima, kao što su širina, visina, margina, padding, širina obruba, veličina fonta i sjena teksta. "> Definira visinu kao apsolutnu vrijednost. CSS tip podataka predstavlja vrijednost u postotku. Često se koristi za definiranje veličine u odnosu na roditeljski objekt elementa. Brojna svojstva mogu koristiti postotke kao što su margina širine visine i veličina fonta.> Definira visinu kao postotak visine bloka koji sadrži. Automatski Preglednik će izračunati i odabrati visinu za navedeni element. Max-content Intrinzična preferirana visina. Min-content Unutarnja minimalna visina. Fit-content (CSS podaci tip predstavlja vrijednost koja može biti a ili a ."> ) Koristi formulu fit-content s dostupnim prostorom zamijenjenim navedenim argumentom, tj. min (maks-sadržaj, max (min-sadržaj,)).

Formalna sintaksa

CSS tip podataka predstavlja vrijednost u postotku. Često se koristi za definiranje veličine u odnosu na roditeljski objekt elementa. Brojna svojstva mogu koristiti postotke kao što su margina širine visine i veličina fonta.> border-box content-box dostupan min-content max-content fit-content auto

Primjer

HTML

Ja sam visok 50 piksela.

Ja sam visok 25 piksela.

Ja sam upola niži od svog roditelja.

CSS

div (širina: 250px; margin-bottom: 5px; obrub: 2px puna plava;) #taller (visina: 50px;) #shorter (visina: 25px;) #parent (visina: 100px;) #child (visina: 50% ; širina: 75%;)

Proizlaziti

Problemi pristupačnosti

Osigurajte da elementi postavljeni s visinom nisu skraćeni i/ili ne prikrivaju drugi sadržaj kada se stranica zumira radi povećanja veličine teksta.

Tehnički podaci

Specifikacija	Status	Komentar
CSS Intrinsic & Extrinsic Sizing Module Razina 4	Nacrt urednika
CSS Intrinsic & Extrinsic Sizing Module, razina 3 Definicija "visine" u toj specifikaciji.	Radni nacrt	Dodane ključne riječi max-content, min-content, fit-content.
CSS prijelazi Definicija "visine" u toj specifikaciji.	Radni nacrt	Navodi visinu kao animiranu.
CSS razina 2 (revizija 1) Definicija "visine" u toj specifikaciji.	Preporuka	Dodaje podršku za CSS tip podataka koji predstavlja vrijednost udaljenosti. Duljine se mogu koristiti u brojnim CSS svojstvima, kao što su širina, visina, margina, padding, širina obruba, veličina fonta i sjena teksta. "> vrijednosti i precizira na koji element se odnosi.
CSS razina 1 Definicija "visine" u toj specifikaciji.	Preporuka	Početna definicija.

Početna vrijednost	auto
Odnosi se na	svi elementi osim nezamijenjenih inline elemenata, stupaca tablice i grupa stupaca
Naslijeđeno	Ne
Postocima	Postotak se izračunava u odnosu na visinu generiranog bloka koji sadrži okvir. Ako visina bloka koji sadrži nije eksplicitno navedena (tj. ovisi o visini sadržaja), a ovaj element nije apsolutno pozicioniran, vrijednost se izračunava na auto. Postotak visine na korijenskom elementu je relativan u odnosu na početni blok koji sadrži.
Mediji	vizualni
Izračunata vrijednost	postotak ili automatski ili apsolutna duljina
Vrsta animacije	CSS tip podataka se interpolira kao stvarni brojevi s pomičnim zarezom. "> duljina, CSS tip podataka interpoliraju se kao stvarni brojevi s pomičnim zarezom."> postotak ili izračun ();
Kanonski poredak	jedinstveni nedvosmisleni poredak definiran formalnom gramatikom

Kompatibilnost preglednika

Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite pridonijeti podacima, provjerite https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenjem.

Ažurirajte podatke o kompatibilnosti na GitHubu

	Radna površina						Mobilni
	Krom	Rub	Firefox	Internet Explorer	Opera	Safari	Android web-prikaz	Chrome za Android	Firefox za Android	Opera za Android	Safari na iOS-u	Samsung Internet
visina	Puna podrška za Chrome 1	Edge Puna podrška 12	Puna podrška za Firefox 1	IE puna podrška 4	Opera Puna podrška 7	Safari Puna podrška 1	WebView za Android Puna podrška 1	Chrome Android Puna podrška 18	Firefox Puna podrška za Android 4	Opera Android Puna podrška 10.1	Safari iOS Puna podrška 1	Samsung Internet Android Puna podrška 1.0
fit-content	Puna podrška za Chrome 46	Rub Bez podrške br	Firefox Nema podrške br	IE Nema podrške br	Opera Puna podrška 33	Safari Puna podrška 11 Potpuna podrška 11 Potpuna podrška 9 S prefiksom S prefiksom				Opera Android?	Safari iOS Puna podrška 11 Potpuna podrška 11 Potpuna podrška 9 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -webkit-
maksimalni sadržaj	Puna podrška za Chrome 46	Rub Bez podrške br	S prefiksom S prefiksom	IE Nema podrške br	Opera Puna podrška 44	Safari puna podrška 11	WebView za Android Puna podrška 46	Chrome Android Puna podrška 46	S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -moz-			Samsung Internet Android Puna podrška 5.0
min-sadržaj	Puna podrška za Chrome 46	Rub Bez podrške br	Firefox Puna podrška 66 Potpuna podrška 66 Potpuna podrška 3 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -moz-	IE Nema podrške br	Opera Puna podrška 44	Safari puna podrška 11	WebView za Android Puna podrška 46	Chrome Android Puna podrška 46	Firefox Android Puna podrška 66 Puna podrška 66 Potpuna podrška 4 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -moz-	Opera Android Puna podrška 43	Safari iOS Puna podrška 11	Samsung Internet Android Puna podrška 5.0
rastegnuti	Puna podrška za Chrome 28 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 28 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv	Rub Bez podrške br	Firefox Nema podrške br	IE Nema podrške br	Opera Puna podrška 15 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 15 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv Koristi nestandardni naziv: -webkit-fill-available	Safari Puna podrška 9 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 9 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv Koristi nestandardni naziv: -webkit-fill-available	WebView Android Puna podrška 4.4 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 4.4 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv Koristi nestandardni naziv: -webkit-fill-available	Chrome Android Puna podrška 28 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 28 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv Koristi nestandardni naziv: -webkit-fill-available	Firefox Android Nema podrške br	Opera Android?	Safari iOS Puna podrška 9 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 9 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv Koristi nestandardni naziv: -webkit-fill-available	Samsung Internet Android Puna podrška 5.0 Webkit-fill-dostupan"> Alternativni naziv Potpuna podrška 5.0 Webkit-fill-dostupan"> Alternativni naziv Webkit-fill-dostupan"> Alternativni naziv Koristi nestandardni naziv: -webkit-fill-available

Legenda

Potpuna podrška Potpuna podrška Bez podrške Bez podrške Kompatibilnost nepoznata Kompatibilnost nepoznata Koristi nestandardni naziv. Koristi nestandardni naziv. Za upotrebu je potreban prefiks dobavljača ili drugačije ime. Za upotrebu je potreban prefiks dobavljača ili drugačije ime.

Svojstva širine css-a odgovorna su za vrijednost širine područja sadržaja elementa.

Širina: vrijednost | kamata | auto | naslijediti

Svojstvo visine css odgovorno je za vrijednost visine područja sadržaja elementa.

Visina: vrijednost | kamata | auto | naslijediti

Negativne vrijednosti za visinu i širinu nisu dopuštene.

Čini se da je sve jednostavno i jasno s ovim CSS svojstvima, ali, zapravo, sve se ispostavilo da nije baš tako jednostavno.

Postavljanje širine na element na web stranici sa svojstvom širine od 500px ne znači da će ukupna širina tog elementa biti 500 piksela ili više.

Najvažnije je razumjeti da svojstva širine i visine postavljaju širinu i visinu područja sadržaja.

Svojstva širine i visine samo su jedna od komponenti iz kojih će se izračunati ukupna širina i visina elementa. Oni označavaju širinu i visinu područja sadržaja, što se može vidjeti na sljedećoj slici. Također, svojstva kao što su padding, margina i granica uključeni su u formiranje ukupne širine i visine.

To se sada može lako vidjeti.

Uzmimo za primjer dva bloka iste širine, ali će jedan od njih dodatno postaviti svojstvo paddinga.

širina: 100px

širina: 100px + padding

Prema zadanim postavkama, web stranice imaju ponašanje da se vrijednost dopuna za odgovarajuću stranu dodaje vrijednostima visine i širine.

Oni. ukupna širina elementa sastojat će se od vrijednosti svojstva širine elementa, plus vrijednosti padding-left i padding-right.

Za različite vrste elemenata koji se mogu pronaći na stranici, ukupna širina i visina elemenata izračunava se pomoću posebnih formula.

Za različite vrste elemenata koji se mogu naći na web stranicama, vrijednosti širine i visine mogu imati različita ponašanja i vrijednosti.

Slična situacija bit će i sa svojstvom visine.

visina: 100px

visina: 100px + padding

CSS ima poseban algoritam koji izračunava vrijednosti širine i visine za različite elemente na web stranici. Neću se sada zadržavati na ovom algoritmu, jer pomalo je komplicirano.

Sada je glavna stvar koju moramo razumjeti je da nam svojstva širine i visine omogućuju rad sa širinom i visinom područja sa sadržajem elementa, a ne s ukupnom širinom i visinom elementa.

Visina i širina elementa su izračunate vrijednosti. Svaki element web stranice čini pravokutni prostor, koji se pak sastoji od nekoliko područja - područje sadržaja (sadržaj), padding područja, okvirna područja i terenske površine element.

Između sadržaja elementa i njegove granice su udubljenje padding, izvan granice elementa - polja margina. Svaki element ima područje sadržaja, ostala područja su izborna.

Riža. 1. Blok model elementa

1. Visina elementa

Svojstvo visina postavlja visinu sadržaja elementa bloka i nema utjecaja na prikaz inline elemenata: inline; ... Visina inline elemenata jednaka je visini njihovog sadržaja. Negativne vrijednosti nisu dopuštene. Imovina se ne nasljeđuje.

Sintaksa

P (visina: 100px;)

2. Širina artikla

Svojstvo width postavlja širinu sadržaja elementa bloka i nema utjecaj na prikaz inline elemenata: inline; ... Inline elementi imaju istu širinu kao i njihov sadržaj. Negativne vrijednosti nisu dopuštene. Imovina se ne nasljeđuje.

Sintaksa

P (širina: 100px;)

3. Visina i širina apsolutno postavljenog elementa

Postavite širinu i visinu položaja apsolutno pozicioniranog elementa: apsolutno; nije uvijek potrebno, jer su u ovom slučaju visina i širina implicitno određene pomakom elementa. Ako su obrubi i margine specificirani za element, oni smanjuju veličinu područja sadržaja za odgovarajuće vrijednosti.

Div (pozadina: # 6A7690; pozicija: apsolutna; gore: 0; dolje: 0; lijevo: 50%; desno: 0;) / * u ovom slučaju, visina elementa je 100%, širina je 50% roditeljskog bloka * /
Riža. 2. Visina i širina apsolutno postavljenog elementa

4. Uvlake elemenata

Koristeći svojstvo padding, možete postaviti padding za više strana elementa u isto vrijeme sljedećim redoslijedom:. Ako element ima pozadinu, proširit će se i na padding. Negativne vrijednosti nisu dopuštene. Imovina se ne nasljeđuje.

Ako su date tri vrijednosti, na primjer div (odsječak: 10px 20px 30px;), tada će biti raspoređene sljedećim redoslijedom: prva vrijednost je gornji padding, druga je desni i lijevi padding, a treća je donji padding.
Ako se zadaju dvije vrijednosti, na primjer, div (odmak: 10px 20px;), tada će prva postaviti gornji i donji padding, a druga će postaviti desno i lijevo.
Jedna vrijednost kao što je div (padding: 10px;) će postaviti isti padding na sve strane elementa.

Sintaksa

P (ispun: 5px 10px 15px 10px;)

4.1. Uvlačenje jedne strane elementa

Da biste postavili padding samo na jednoj strani elementa, trebate upotrijebiti jedno od svojstava padding-top, padding-right, padding-bottom, padding-left, na primjer:

P (padding-lijevo: 10px;)

5. Polja elemenata

Većina elemenata međusobno je odvojena marginama. Svojstvo margine je skraćeni oblik za pisanje margina elementa sljedećim redoslijedom: gore, desno, dolje, lijevo... Koristi se kada trebate odrediti margine s više strana, ali ne nužno s četiri strane. Okomito susjedne margine blok elemenata su skupljene, a gornja i donja margina nemaju utjecaja na inline elemente. Negativne vrijednosti su dopuštene. Imovina se ne nasljeđuje.

Ako su date tri vrijednosti, na primjer div (margina: 10px 20px 30px;), tada će biti raspoređene sljedećim redoslijedom: prva vrijednost je gornja margina, druga je desna i lijeva margina, a treća je donja margina.
Ako su dane dvije vrijednosti, na primjer div (margina: 10px 20px;), tada će prva postaviti gornju i donju marginu, druga će postaviti desnu i lijevu.
Jedna vrijednost poput div (margina: 10px;) postavit će iste margine na svim stranama elementa.

(margina: 0 auto;) će raditi samo ako je širina elementa eksplicitno postavljena.

Riža. 3. margina: auto; za apsolutno pozicioniran element

Sintaksa

Div (margina: 5px 10px 2px 5px;)

5.1. Margine na jednoj strani elementa

Svojstva margin-top, margin-right, margin-bottom, margin-left kontroliraju odgovarajuće margine na svakoj strani elementa, na primjer:

P (margin-lijevo: 10px;)

6. Ograničenje širine i visine

CSS također podržava nekoliko drugih svojstava vezanih za postavljanje visine i širine elemenata web stranice: min-height, min-width, max-height i max-width. Ova svojstva omogućuju postavljanje minimalnih i maksimalnih vrijednosti za širinu ili visinu elementa, dajući elementu mogućnost da ispuni raspoloživi prostor. Svojstva se često koriste za responzivni dizajn web stranica. Primjenjuje se na sve elemente osim umetnutih i tabličnih elemenata. Uvijek slijede glavno pravilo, t.j. nakon što elementu date visinu ili širinu. Nije naslijeđena.

Možete odrediti redovite dimenzije pomoću nekih mjernih jedinica, a ograničenja veličine pomoću drugih jedinica, na primjer:

Div (širina: 400px; maks. širina: 50%;)

Element će imati širinu od 400px samo ako ova vrijednost ne prelazi 50% širine bloka spremnika, inače će se njegova širina smanjiti.

Posljednje ažuriranje: 21.04.2016

Dimenzije elemenata se postavljaju pomoću svojstava širine i visine.

Zadana vrijednost za ova svojstva je auto, što znači da sam preglednik određuje širinu i visinu elementa. Također možete eksplicitno postaviti dimenzije pomoću jedinica (piksela, em) ili pomoću postotaka:

Širina: 150px; širina: 75%; visina: 15em;

Pikseli definiraju točnu širinu i visinu. Jedinica em ovisi o visini fonta u elementu. Ako je veličina fonta elementa, na primjer, 16 piksela, tada bi 1 em za taj element bio 16 piksela. To jest, ako je širina elementa postavljena na 15em, tada će zapravo biti 15 * 16 = 230 piksela. Ako element nema određenu veličinu fonta, tada će biti preuzet iz naslijeđenih parametara ili zadanih vrijednosti.

Postoci za svojstvo širine izračunavaju se na temelju širine elementa spremnika. Ako, na primjer, element tijela na web stranici ima širinu od 1000 piksela i njegov ugniježđeni element je

ima širinu od 75%, tada je stvarna širina ovog bloka

je 1000 * 0,75 = 750 piksela. Ako korisnik promijeni veličinu prozora preglednika, tada će se promijeniti i širina elementa tijela i, sukladno tome, širina ugniježđenog div bloka.

Vrijednosti postotka za svojstvo visine rade slično svojstvu širine, osim što se visina sada izračunava iz visine elementa spremnika.

Na primjer:

Dimenzije u CSS3

Međutim, stvarne dimenzije elementa mogu se razlikovati od onih postavljenih u svojstvima širine i visine. Na primjer:

Dimenzije u CSS3

Kao što možete vidjeti na snimci zaslona, u stvarnosti vrijednost svojstva širine - 200px - određuje samo širinu unutarnjeg sadržaja elementa, a ispod bloka samog elementa bit će dodijeljen prostor čija širina jednaka je širini unutarnjeg sadržaja (svojstvo širine) + dopuna (svojstvo paddinga) + širina obruba ( svojstvo širine granice) + dopuna (svojstvo margine). To jest, element će imati širinu od 230 piksela, a širina okvira elementa, uzimajući u obzir margine, bit će 250 piksela.

Takve izračune treba uzeti u obzir pri dimenzioniranju elemenata.

Pomoću dodatnog skupa svojstava možete postaviti minimalnu i maksimalnu veličinu:

min-width: minimalna širina

max-width: maksimalna širina

min-height: minimalna visina

max-height: maksimalna visina

minimalna širina: 200px; širina: 50%; maksimalna širina: 300px;

U ovom slučaju, širina elementa iznosi 50% širine elementa spremnika, ali ne može biti manja od 200 piksela niti veća od 300 piksela.

Nadjačavanje širine bloka

Svojstvo box-sizing omogućuje vam da nadjačate veličinu stavki. Može poprimiti jednu od sljedećih vrijednosti:

content-box: zadana vrijednost svojstva koju preglednik dodaje širinu obruba i padding vrijednostima svojstva širine i visine kako bi odredio stvarnu širinu i visinu elemenata

padding-box: govori web-pregledniku da širina i visina elementa trebaju uključivati padding kao dio njihove vrijednosti. Na primjer, recimo da imamo sljedeći stil:

Širina: 200px; visina: 100px; margina: 10px; padding: 10px; obrub: 5px čvrsta #ccc; boja pozadine: #eee; box-sizing: padding-box;

Ovdje će stvarna širina unutarnjeg sadržaja bloka biti 200px (širina) - 10px (padding-lijevo) - 10px (padding-desno) = 180px.

Treba napomenuti da većina modernih preglednika ne podržava ovo svojstvo.

border-box: govori web-pregledniku da širina i visina elementa trebaju uključivati padding i obrub kao dio njihove vrijednosti. Na primjer, recimo da imamo sljedeći stil:

Širina: 200px; visina: 100px; margina: 10px; padding: 10px; obrub: 5px čvrsta #ccc; boja pozadine: #eee; box-sizing: border-box;

Ovdje će stvarna širina unutarnjeg sadržaja bloka biti 200 px (širina) - 10 px (odsječak-lijevo) - 10 px (odsječak-desno) - 5 px (border-left-width) - 5px (obrub-desno-širina) = 170 piksela.

Na primjer, definirajmo dva okvira koja se razlikuju samo po vrijednosti svojstva box-sizing:

Dimenzije u CSS3

Određivanje stvarne veličine u CSS 3

U prvom slučaju, pri dimenzioniranju bloka, debljini obruba će se dodati svojstva širine i visine, kao i padding i padding, tako da će prvi blok biti velik.