Visina i širina elementa su proračunate vrednosti. Svaki element web stranice čini pravokutno područje, koje se pak sastoji od nekoliko područja - područje sadržaja (sadržaj), područja punjenja, područja okvira i terenske oblasti element.

Između sadržaja elementa i njegove granice nalaze se uvlačenje podstava, izvan ruba elementa - polja marža. Svaki element ima područje sadržaja, druga područja su izborna.

Pirinač. 1. Blok model elementa

1. Visina elementa

Svojstvo height postavlja visinu sadržaja blok elementa i nema utjecaja na prikaz inline elemenata: inline; ... Visina umetnutih elemenata jednaka je visini njihovog sadržaja. Negativne vrijednosti nisu dopuštene. Imovina nije naslijeđena.

Sintaksa

P (visina: 100px;)

2. Širina stavke

Svojstvo width postavlja širinu sadržaja blok elementa i nema utjecaja na prikaz inline elemenata: inline; ... Ugrađeni elementi imaju istu širinu kao i njihov sadržaj. Negativne vrijednosti nisu dopuštene. Imovina nije naslijeđena.

Sintaksa

P (širina: 100px;)

3. Visina i širina apsolutno postavljenog elementa

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

Div (pozadina: # 6A7690; pozicija: apsolutna; gornja: 0; donja: 0; lijeva: 50%; desna: 0;) / * u ovom slučaju visina elementa je 100%, širina 50%nadređenog bloka * /
Pirinač. 2. Visina i širina apsolutno postavljenog elementa

4. Uvlačenje elemenata

Koristeći svojstvo padding, možete postaviti padding za više strana elementa istovremeno sljedećim redoslijedom :. Ako element ima pozadinu, on će se proširiti i na padding. Negativne vrijednosti nisu dopuštene. Imovina nije naslijeđena.

Ako su zadane tri vrijednosti, na primjer, div (padding: 10px 20px 30px;), tada će se one rasporediti sljedećim redoslijedom: prva vrijednost je gornji padding, druga je desni i lijevi padding, a treća je donja obloga.
Ako su date dvije vrijednosti, na primjer div (padding: 10px 20px;), tada će prva postaviti gornje i donje punjenje, druga će postaviti desnu i lijevu stranu.
Jedna vrijednost, kao što je div (padding: 10px;), postavit će isti padding sa svih strana elementa.

Sintaksa

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

4.1. Uvlačenje jedne strane elementa

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

P (padding-left: 10px;)

5. Polja elemenata

Većina elemenata odvojeni su jedan od drugog marginama. Svojstvo margine je skraćenica za pisanje margina elementa sljedećim redoslijedom: gore, desno, dolje, lijevo... Koristi se kada trebate navesti margine s više strana, ali ne nužno s četiri strane. Vertikalno susjedne margine blok elemenata su skupljene, a gornje i donje margine nemaju utjecaja na umetnute elemente. Negativne vrijednosti su dozvoljene. Imovina nije naslijeđena.

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

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

Pirinač. 3. margina: auto; za apsolutno pozicionirani element

Sintaksa

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

5.1. Margine s jedne strane elementa

Svojstva margin-top, margin-right, margin-bottom, margin-left kontroliraju odgovarajuće margine sa svake strane elementa, na primjer:

P (margina-lijevo: 10px;)

6. Ograničavanje širine i visine

CSS podržava i nekoliko drugih svojstava koja se odnose na postavljanje visine i širine elemenata web stranice: min-visina, min-širina, max-visina i max-širina. Ova vam 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 responzivan dizajn web stranica. Primjenjuje se na sve elemente osim inline i elemenata tablice. Uvijek slijede glavno pravilo, tj. nakon što je elementu dao visinu ili širinu. Nije naslijeđeno.

Regularne dimenzije možete postaviti pomoću nekih mjernih jedinica, a ograničenja veličine pomoću drugih jedinica, na primjer:

Div (širina: 400px; max-širina: 50%;)

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

U ovom ćemo članku pogledati kako možete postaviti visinu bloka kao postotak njegove širine u CSS -u. Pogledajmo primjenu ove tehnologije na primjeru stvaranja Bootstrap vrtuljka (klizača) od slika različitih veličina.

Kreiranje bloka s visinom koja ima određeni postotak njegove širine

1. Kreirajte HTML strukturu od 2 bloka:
   Prvi blok ima 2 klase. Koristeći klasu-responsive klasu postavit ćemo relativno pozicioniranje bloka. To se mora učiniti tako da se 2 blok (koji će imati apsolutno pozicioniranje) nalazi u odnosu na njega. Osim toga, ova klasa se također koristi za dodavanje pseudo-elementa: before prije sadržaja odgovarajućih elemenata (reagira na stavku). Ovaj element će postaviti željenu visinu okvira u odnosu na njegovu širinu koristeći CSS svojstvo padding-top. Trik ove metode je da ako je svojstvo padding postavljeno na ne u pikselima, već u postocima, tada će preglednik izračunati njegovu širinu... Tako je moguće dobiti blok potrebne visine. Sljedeći korak je dati bloku 2 apsolutno pozicioniranje i poravnati ga s prvim blokom.
2. Dodajte sljedeći CSS na stranicu: .item-responsive (position: relative; / * relative positioning * /) .item-responsive: before (display: block; / * renderirajte element kao blok * / content: ""; / * sadržaj pseudo-element * / width: 100%; / * element width * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /) .item-responsive> .content (položaj: apsolutni; / * apsolutni položaj elementa * / / * položaj elementa * / vrh: 0; lijevo: 0; desno: 0; odozdo: 0;) / * Ako je potrebno (za blokove sa ovim klase) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (top-padding: 50%; / * (1: 2) * 100 % * /) .item -1by1 (padding -top: 100%; / * (1: 1) * 100% * /)

Primjenom gore navedene tehnologije za stvaranje Bootstrap vrtuljka

Ako niste upoznati s Bootstrapom i želite znati o čemu se radi, možete pogledati naš Uvod u Bootstrap.

Pogledajmo primjer gdje će se gornja HTML struktura i CSS kod koristiti za prikaz slajdova Bootstrap rotirajućih izbornika.

Sljedeće datoteke koristit ćemo kao slike:

• carousel_1.jpg (širina = 736px, visina = 552px, omjer (visina do širine) = 1,33);
• carousel_2.jpg (širina = 1155px, visina = 1280px, omjer (visina do širine) = 0,9);
• carousel_3.jpg (širina = 1846px, visina = 1028px, omjer (visina do širine) = 1,8);
• carousel_4.jpg (širina = 1140px, visina = 550px, omjer (visina do širine) = 2.07);
• carousel_5.jpg (širina = 800px, visina = 600px, omjer slike (visina do širine) = 1,33);

Slike ćemo postaviti kao pozadinu. To će omogućiti korištenje slika s različitim omjerima stranica u vrtiljaku Bootstrap 3.

HTML označavanje vrtuljka:

CSS kod rotirajućeg izbornika:

Odgovara na stavku (položaj: relativno; / * relativno pozicioniranje * /). Odgovara na stavku: prije (prikaz: blok; / * iscrtaj element kao blok * / sadržaj: ""; / * sadržaj pseudo-elemenata * / širina: 100 %; / * širina elementa * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /) .item-responsive> .content (položaj: apsolutni; / * apsolutni položaj elementa * / / * položaj elementa * / vrh: 0; lijevo: 0; desno: 0; odozdo: 0; veličina pozadine: omot! važno;)

Prema zadanim postavkama, autowidth se koristi za elemente bloka. To znači da će element biti vodoravno rastegnut za onoliko koliko ima slobodnog prostora. Zadana visina elemenata bloka postavlja se automatski, tj. preglednik rasteže područje sadržaja okomito kako bi prikazao sav sadržaj. Da biste postavili prilagođene dimenzije za područje sadržaja elementa, možete koristiti svojstva širine i visine.

CSS svojstvo width omogućava vam da postavite širinu područja sadržaja elementa, a svojstvo height visinu područja sadržaja:

Imajte na umu da svojstva širine i visine određuju samo veličinu područja sadržaja; da biste izračunali ukupnu širinu elementa bloka, dodajte širinu područja sadržaja, lijevi i desni razmak i širinu lijevog i desnog ruba. Isto vrijedi i za ukupnu visinu elementa, samo se sve vrijednosti izračunavaju okomito:

Za ovaj odlomak postavit ćemo samo širinu i visinu.

Ovaj odlomak osim širine i visine sadrži i podstavu, obrub i podstavu.

Pokušajte "

Primjer jasno pokazuje da drugi element zauzima više prostora od prvog. Ako računate prema našoj formuli, dimenzije prvog stavka su 150x100 piksela, a dimenzije drugog paragrafa su:

Ukupna visina:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	gornji okvir		gornji uvlačenje		visina		niže uvlačenje		dno okvir

odnosno 180x130 piksela.

Prelijevanje elemenata

Nakon što ste definirali širinu i visinu elementa, vrijedi obratiti pažnju na jednu važnu točku - sadržaj koji se nalazi unutar elementa može premašiti navedenu veličinu bloka. U ovom slučaju dio sadržaja će otići izvan granica elementa, kako biste izbjegli ovaj neugodan trenutak, možete koristiti svojstvo CSS overflow. Svojstvo overflow govori pretraživaču šta da radi ako sadržaj bloka premašuje njegovu veličinu. Ovo svojstvo može uzeti jednu od četiri vrijednosti:

• visible je zadana vrijednost koju koristi preglednik. Postavljanje ove vrijednosti će imati isti učinak kao i ne postavljanje svojstva overflow.
• scroll - dodaje okomite i vodoravne trake za pomicanje elementu.
• auto - dodaje trake za pomicanje prema potrebi.
• skriveno - skriva dio sadržaja koji nadilazi granice blok elementa.

Opis

Postavlja visinu bloka ili zamjenjivih elemenata (na primjer, oznaka ). Visina ne uključuje debljinu obruba oko elementa, vrijednost podloge i margine.

Ako sadržaj bloka prelazi navedenu visinu, tada će visina elementa ostati nepromijenjena, a sadržaj će biti prikazan iznad njega. Ova funkcija može uzrokovati preklapanje sadržaja elemenata kada su elementi u HTML kodu uzastopni. Da se to spriječi, dodajte overflow: auto u stil elementa.

Sintaksa

visina: vrijednost | kamata | auto | nasljediti

Vrednosti

Sve jedinice dužine prihvaćene u CSS-u prihvaćene su kao vrijednosti- na primjer, pikseli (px), inči (in), tačke (pt) itd. Prilikom korištenja postotnog zapisa, visina elementa se izračunava ovisno o visini roditeljskog elementa. Ako roditelj nije izričito naveden, tada se prozor preglednika koristi kao njegov roditelj. auto postavlja visinu na osnovu sadržaja elementa

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na Sl. 1.

Pirinač. 1. Primjena svojstva height

Objektni model

document.getElementById ("elementID") .style.height

Preglednici

Internet Explorer 6 pogrešno definira visinu kao minimalnu visinu.

U quirk načinu rada, Internet Explorer do uključujući 8.0 pogrešno izračunava visinu elementa bez dodavanja vrijednosti paddinga, margine i ivica.

Internet Explorer do i uključujući verziju 7.0 ne podržava nasljednu vrijednost.

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 rubni okvir, umjesto toga određuje visinu rubnog područja.

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

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

Sintaksa

/ * Vrednost ključne reči * / height: auto; / * vrednosti* / visina: 120px; visina: 10em; / * Vrijednost * / visina: 75%; / * Globalne vrijednosti * / visina: naslijedi; visina: početna; visina: unset;

Vrednosti

CSS tip podataka predstavlja vrijednost udaljenosti. Dužine se mogu koristiti u brojnim svojstvima CSS-a, kao što su širina, visina, margina, padding, width-border, font-size i text-shadow. "> Definira visinu kao apsolutnu vrijednost. CSS tip podataka predstavlja postotnu vrijednost. Često se koristi za definiranje veličine u odnosu na roditeljski objekt elementa. Brojna svojstva mogu koristiti postotke, poput širine margine visine i veličine fonta.> Definira visinu kao postotak visine bloka koji sadrži. Automatski Preglednik će izračunati i odabrati visinu za navedeni element. Max-content Unutarnja željena visina. Min-content Unutarnja minimalna visina. Fit-content (CSS podaci type predstavlja vrijednost koja može biti ili a ili a ."> ) Koristi formulu fit-content s raspoloživim prostorom zamijenjenim navedenim argumentom, tj. min (max-sadržaj, max (min-sadržaj,)).

Formalna sintaksa

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

Primjer

Html

Visok sam 50 piksela.

Visok sam 25 piksela.

Ja sam upola visok od roditelja.

CSS

div (širina: 250px; margin-bottom: 5px; border: 2px solid blue;) #taller (visina: 50px;) #kraće (visina: 25px;) #parent (visina: 100px;) #child (visina: 50% ; širina: 75%;)

Rezultat

Zabrinutost oko pristupačnosti

Uvjerite se da elementi postavljeni s visinom nisu skraćeni i / ili da ne zaklanjaju drugi sadržaj kada je stranica zumirana kako bi se povećala veličina teksta.

Specifikacije

Specifikacija	Status	Komentar
CSS unutrašnji i vanjski modul za određivanje veličine, nivo 4	Nacrt urednika
CSS unutrašnji i vanjski modul za određivanje veličine, nivo 3 Definicija "visine" u toj specifikaciji.	Working Draft	Dodane su ključne riječi sa maksimalnim sadržajem, minimalnim sadržajem i fit sadržajem.
CSS tranzicije Definicija "visine" u toj specifikaciji.	Working Draft	Navodi visinu kao animiranu.
CSS nivo 2 (revizija 1) Definicija "visine" u toj specifikaciji.	Preporuka	Dodaje podršku za CSS tip podataka koji predstavlja vrijednost udaljenosti. Dužine se mogu koristiti u brojnim svojstvima CSS-a, kao što su širina, visina, margina, padding, width-border, font-size i text-shadow. "> vrijednosti i preciznosti na koji se element odnosi.
CSS nivo 1 Definicija "visine" u toj specifikaciji.	Preporuka	Početna definicija.

Početna vrijednost	auto
Odnosi se na	svi elementi osim nenamjenjenih umetnutih elemenata, stupaca tablice i grupa stupaca
Nasleđeno	no
Procenti	Postotak se izračunava s obzirom na visinu bloka koji sadrži generirani 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 Postotak visine na osnovnom elementu je u odnosu na početni blok koji sadrži.
Mediji	vizuelni
Izračunata vrijednost	postotak ili auto ili apsolutna dužina
Vrsta animacije	CSS tip podataka se interpolira kao stvarni broj s pomičnim zarezom. "> dužina, CSS tip podataka se interpolira kao stvarni broj s pomičnim zarezom."> postotak ili calc ();
Kanonski poredak	jedinstveni nedvosmisleni redoslijed 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

	Desktop						Mobilni
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome za Android	Firefox za Android	Opera za Android	Safari na iOS -u	Samsung Internet
visina	Chrome Potpuna podrška 1	Edge Potpuna podrška 12	Puna podrška za Firefox 1	IE Potpuna podrška 4	Opera Potpuna podrška 7	Safari Potpuna podrška 1	WebView Android Potpuna podrška 1	Chrome Android Potpuna podrška 18	Firefox Android Potpuna podrška 4	Opera Android Potpuna podrška 10.1	Safari iOS Potpuna podrška 1	Samsung Internet Android Potpuna podrška 1.0
fit-content	Chrome Potpuna podrška 46	Rubovi Nema podrške Ne	Firefox Nema podrške Ne	IE Nema podrške Ne	Opera Puna podrška 33	Safari Potpuna podrška 11 Potpuna podrška 11 Potpuna podrška 9 Prefiks Prefiks				Opera Android?	Safari iOS Potpuna podrška 11 Potpuna podrška 11 Potpuna podrška 9 Prefiks Prefiks Implementirano sa prefiksom dobavljača: -webkit-
max-content	Chrome Potpuna podrška 46	Rubovi Nema podrške Ne	Prefiks Prefiks	IE Nema podrške Ne	Opera Puna podrška 44	Safari Potpuna podrška 11	WebView Android Potpuna podrška 46	Chrome Android Potpuna podrška 46	Prefiks Prefiks Implementirano sa prefiksom dobavljača: -moz-			Samsung Internet Android Potpuna podrška 5.0
min-sadržaj	Chrome Potpuna podrška 46	Rubovi Nema podrške Ne	Firefox Potpuna podrška 66 Potpuna podrška 66 Potpuna podrška 3 Prefiks Prefiks Implementirano sa prefiksom dobavljača: -moz-	IE Nema podrške Ne	Opera Puna podrška 44	Safari Potpuna podrška 11	WebView Android Potpuna podrška 46	Chrome Android Potpuna podrška 46	Firefox Android Potpuna podrška 66 Potpuna podrška 66 Potpuna podrška 4 Prefiks Prefiks Implementirano sa prefiksom dobavljača: -moz-	Opera Android Potpuna podrška 43	Safari iOS Potpuna podrška 11	Samsung Internet Android Potpuna podrška 5.0
rastezanje	Chrome Potpuna podrška 28 Webkit-fill-available"> Alternativno ime Potpuna podrška 28 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime	Rubovi Nema podrške Ne	Firefox Nema podrške Ne	IE Nema podrške Ne	Opera Puna podrška 15 Webkit-fill-available"> Alternativno ime Potpuna podrška 15 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime Koristi nestandardno ime: -webkit-fill-available	Safari Potpuna podrška 9 Webkit-fill-available"> Alternativno ime Potpuna podrška 9 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime Koristi nestandardno ime: -webkit-fill-available	WebView Android Potpuna podrška 4.4 Webkit-fill-available"> Alternativno ime Potpuna podrška 4.4 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime Koristi nestandardno ime: -webkit-fill-available	Chrome Android Potpuna podrška 28 Webkit-fill-available"> Alternativno ime Potpuna podrška 28 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime Koristi nestandardno ime: -webkit-fill-available	Firefox Android Nema podrške Ne	Opera Android?	Safari iOS Potpuna podrška 9 Webkit-fill-available"> Alternativno ime Potpuna podrška 9 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime Koristi nestandardno ime: -webkit-fill-available	Samsung Internet Android Potpuna podrška 5.0 Webkit-fill-available"> Alternativno ime Potpuna podrška 5.0 Webkit-fill-available"> Alternativno ime Webkit-fill-available"> Alternativno ime Koristi nestandardno ime: -webkit-fill-available

Legenda

Potpuna podrška Potpuna podrška Nema podrške Nema podrške Kompatibilnost nepoznata Kompatibilnost nepoznata Koristi nestandardno ime. Koristi nestandardno ime. Za upotrebu je potreban prefiks dobavljača ili drugo ime. Za upotrebu je potreban prefiks dobavljača ili drugo ime.