Blok raspored se često koristi pri izradi web stranice ili bloga. Kao posljedica toga, često je potrebno uvući blokove. Iz tog razloga, oko kako uvući u CSS detaljno opisano u ovoj lekciji. Za preglednik je svaka oznaka spremnik koji ima sadržaj, ispunu, vanjske margine i obrub. U ovoj lekciji naučit ćemo kako napraviti unutarnje i vanjske uvlake i razmotriti njihove glavne parametre.
Slika u nastavku jasno prikazuje parametre uvlake bloka:
Kao što vidite, uvlake se mogu napraviti u četiri smjera: gornja uvlaka (vrh), donja uvlaka (dolje), lijeva uvlaka (lijevo) i desna uvlaka (desno). Mjerne jedinice mogu biti pikseli, postoci i druge CSS jedinice - saznajte više o njima. Ovaj vodič koristi piksele.
Ispuna blokova
Vlasništvo odgovorno za padding u CSS-u je podstava. Dakle, pogledajmo primjer postavljanja ispune za blok:
padding-top: 5px; /*gornje ispuna*/ padding-left: 8px; /*lijevo ispunjavanje*/ padding-desno: 8px; /*desno ispuna*/ padding-bottom: 5px; /*donja podloga*/
U ovom primjeru ispuna se postavlja zasebno za svaku stranu bloka. Osim toga, postoji nekoliko načina za postavljanje uvlake u CSS-u:
margina: 5px 8px 5px 8px; /*gornja, desna, donja, lijeva margina*/ margina: 5px 8px 5px; /*opisuje gornju, lijevu, desnu, donju marginu*/ margina: 5px 8px; /*opisuje gornju i donju, desnu i lijevu marginu*/ margina: 7px; /*opisuje sva unutarnja ispuna od 7px*/
Lakše je zapamtiti prvu i posljednju metodu. U prvom slučaju, uvlake se postavljaju u smjeru kazaljke na satu (gore, desno, dolje, lijevo) - možemo odrediti bilo koju količinu uvlake; u drugom slučaju, uvlake na svim stranama bit će iste.
Margine bloka
Vlasništvo odgovorno za margine u CSS-u je margina. Primjeri margina u CSS-u:
margin-top: 5px; /*gornja margina*/ margin-left: 10px; /*lijeva margina*/ margin-desno: 10px; /*desna margina*/ margin-bottom: 5px; /*donja margina*/
padding: 5px 10px 5px 10px; /*gornja, desna, donja, lijeva margina*/ padding: 5px 10px 5px; /*opisuje gornje, lijevo i desno, donje ispune*/ padding: 5px 10px; /*opisuje gornji i donji, desni i lijevi ispun*/ padding: 7px; /*opisuje sve margine od 7px*/
Tako, kako uvući u CSS- pitanje nije teško, ali vrlo relevantno. Da biste bolje razumjeli gore opisane informacije, trebali biste upamtiti da postoje dva svojstva: padding - unutarnje uvlake i margina - vanjske uvlake. Također, kao što već znate, postoji nekoliko načina za postavljanje uvlaka, možete ih koristiti.
Dobrodošli na moj blog. Css (Cascading Style Sheets) pruža puno mogućnosti prilagodbe izgled Internet stranice. Danas bih želio ukratko pokazati kako u CSS-u definirati ispunu na vrhu ili na bilo kojoj drugoj strani za bilo koji element.
Margina
Margina se postavlja pomoću svojstva margine. Uz njegovu pomoć možete postaviti margine na sve četiri strane odjednom ili koristiti druga svojstva: margin-top, margin-left, margin-desno, margin-bottom, koja vam omogućuju da to napravite samo s jedne strane.
Margina određuje udaljenost na kojoj će odabrani rub elementa biti pomaknut od ostalih elemenata na stranici. Na primjer, unos:
P,div(
Gornja margina: 20 px;
}
To znači da će svi blokovi i odlomci biti uvučeni na vrhu za 20 piksela, odnosno njihov će gornji rub biti odmaknut od susjednih elemenata za tu udaljenost.
Margine se mogu pisati sa svake strane koristeći samo jedno svojstvo margine, na koje se u nizu pišu 4 vrijednosti:
Div(
Margina: 20px 10px 20px 10px;
}
Ispuna će biti dana s gornjeg, desnog, donjeg i lijevog ruba. Budući da su u ovom slučaju jednaki na suprotnim stranama, mogli bismo to napisati i ovako:
Div(
Margina: 20px 10px;
}
Prva vrijednost je margina na vrhu i dnu, a druga je margina na stranama.
Uvlačenje
Unutarnje popunjavanje radi drugačije - ne odmiče blok od drugih elemenata, već dodaje taj prostor unutar elementa, pomičući sadržaj bloka od njegovih rubova. Udobno je. Gdje ste vidjeli web stranicu na kojoj tekst počinje u gornjem lijevom kutu prozora?
Ovo nisam vidio, jer web programeri uvijek koriste vanjske i unutarnje uvlake kako bi tekst bio što lakši za čitanje. Unutarnje popunjavanje navedeno je korištenjem svojstva popunjavanja, u kojem se mogu navesti 4 vrijednosti odjednom, odvojene razmakom, za sve rubove.
Također, slično margini, možete dodati naziv stranice i postaviti udaljenost samo za nju. Na primjer, top padding se može napisati pomoću padding-top. Općenito, svojstvo padding funkcionira potpuno isto kao i svojstvo margine.
Na primjer, možete dati ovaj dio koda:
Blok(
Širina: 200 px;
Padding: 20px;
}
Što mislite, kolika će biti stvarna širina našeg elementa? Ovdje možete vidjeti da je to 200 piksela, ali obloge dodaju još 20 sa svake strane, za ukupno 240 piksela. Uzmite to u obzir prilikom projektiranja.
Također bih želio napomenuti da se ispuna obično daje samo blok elementima; bolje je ne davati je ugrađenim elementima. Margina dobro funkcionira sa svim elementima.
Za ljepši prikaz elemenata na web stranici, u CSS-u se koriste vanjske i unutarnje margine, a sada ćemo to pogledati na primjerima.
Svaki element, bilo da se radi o odlomku, divu, slici ili videu, vrsta je bloka u kojem možete napraviti uvlake iznutra korištenjem svojstva padding i izvana korištenjem margine.
U CSS-u su ova svojstva za uvlačenje zapisana na ovaj način (odlomak je uzet kao primjer):
Umjesto oznake P ispisat ćete, naravno, svoj element za koji će se primijeniti uvlačenje.
Neophodno je razumjeti i zapamtiti da je za parametre margine i ispune konstrukcija uvlaka za svaku stranu ista.
Odnosno, imamo 4 vrijednosti u svakoj alineji:
Vrijednosti uvlake.
- Prva vrijednost: gornja podstava;
- Drugo značenje: desno uvlačenje;
- Treće značenje: donja uvlaka;
- Četvrto značenje: lijeva uvlaka.
U ovom primjeru napravio sam vanjsku uvlaku margine u css-u na ovaj način: napisao sam 20px na vrhu, 10px na lijevoj i desnoj strani (obično su postavljeni isto zbog simetrije), a 30px na dnu.
A za ispunu sam odredio: 10px na vrhu, lijevo i desno i 14px na dnu.
Vrijednost uvlaka u svojstvima margine i ispune može se smanjiti pod uvjetom da su iste veličine.
Iz mog primjera, skraćeni zapis će izgledati ovako:
To jest, kada nedostaje posljednji numerički unos, u ovom slučaju za lijevu uvlaku, preglednik automatski zamjenjuje istu vrijednost za lijevu uvlaku kao i vrijednost na desnoj strani.
A u mom slučaju, margine s desne i lijeve strane bit će 10px iu margini i u paddingu.
A ako imate iste vrijednosti za margine na vrhu i dnu (na primjer: 16px), kao i iste vrijednosti za margine na lijevoj i desnoj strani (na primjer: 20px), tada će unos imaju još skraćeniji oblik:
U skladu s tim za unutarnju podstavu css unos urađena identično ovoj.
Primjena pojedinačnih uvlaka: za svaku stranu posebno.
Sljedeća svojstva s jednom vrijednošću koriste se za određivanje pojedinačne uvlake:
Svojstva uvlake za svaku stranu.
- margin-top: 3px; vanjska gornja margina;
- margina-lijevo: 4px; vanjska-lijeva margina;
- margina-desno: 6px; vanjska desna margina;
- margina-dno: 10px; vanjska donja margina.
Unosi za unutarnje uvlake pišu se na potpuno isti način, samo što marginu trebate zamijeniti paddingom.
Na primjer, za sve img slike već imate sve uvlake napisane u CSS-u.
Odnosno (da pojasnimo) vanjska margina ima sljedeće vrijednosti: 10px na vrhu, 20px na lijevoj i desnoj strani i 14px na dnu.
A unutarnja podloga je 6px na sve 4 strane.
Recimo da ste odlučili staviti drugu sliku na stranicu, ali za nju želite promijeniti samo vanjsku marginu na vrhu, a ostatak ostaviti kako jest. A da biste izvršili ovaj zadatak, dovoljno je registrirati klasu za ovu sliku i dodati dodatni unos u css.
Kao rezultat toga, slika koju ste dodali s klasom verx prihvatit će sve ispune navedene u css-u za oznaku img i promijenit će samo vanjske ispune za gornju stranu (u našem slučaju: 40px).
Pokušao sam učiniti opis za css uvlake detaljnijim, ali ako imate pitanja, postavite ih kroz komentare.
Zdravo! U početku sam htio podijeliti ovaj članak u 4 mala, ali onda sam razmislio o tome. Za što? Uostalom, prikladnije je kada se takve informacije prikupljaju unutar jednog materijala.
Dakle, danas ćemo naučiti kako napraviti CSS uvlačenje s lijeve i svih ostalih strana - desno, gore i dolje. Mogu se raditi za slike i tekstove. Dolaze u dvije vrste:
- Vanjski;
- Interni.
Za prve je ključno svojstvo margina, za druge – padding. Radi jasnoće, napravio sam mali primjer za vas. Kako bih vizualno lakše razlikovao unutarnji i vanjski prostor, dodao sam vidljivi stol. Da vidimo što se dogodilo?
Margine
Registrirajući ih u datoteci CSS stilovi, možete postaviti usmjerenje informacijskog bloka na stranici. Na primjer, pomaknut ću ga ulijevo i dolje. Odmah da demonstriram kako će to izgledati.
Općenito, možete koristiti sljedeće opcije za postavljanje uvlaka.
Lijevo (margin-lijevo).
S desne strane (margina-desno).
Vrh (margin-top).
Dno (margina-dno).
Sada ću vam pokazati još jednu cool nijansu.
Kao što vidite, možete koristiti jednu od opcija - učinak je isti. Samo u drugom slučaju kod se ispostavlja kompaktnijim. Također imajte na umu da su uvlake postavljene u smjeru kazaljke na satu. Sve počinje na vrhu i završava lijevo.
Padding
Postupak je sličan i ovdje. Samo sada ću dodati nova svojstva ne za cijelu tablicu, već za sadržaj stupaca.
Da vidimo što je od toga ispalo.
Po analogiji s uvlačenje V CSS vanjski može se napisati skraćeno ili za stranke zasebno.
To su bile glavne točke. Na kraju ću vam pokazati kako još možete olakšati neke poslove.
Uvlačenje na razini odabrane oznake
U gore navedenim slučajevima postavljeni su za tekst i slike u isto vrijeme. Zapravo, možete postaviti udaljenost do elemenata na razini određene oznake. Pokazat ću ti kako to radi. otkazujem posljednje promjene i navedite poseban kod u datoteci stila.
Pogledajmo što se dogodilo nakon spremanja promjena.
Slika je ostala na svom mjestu, samo se tekst u krugu pomaknuo ulijevo. Slične manipulacije mogu se primijeniti na druge blokove, na primjer, tr, span.
Kao dodatne informacije Predlažem da pročitate publikaciju o zadatku. Tu su i dovoljno opisani zanimljive načine. Može biti korisno za formiranje crvene linije u tekstu ili izvođenje drugih radnji.
Dodatno, pretplata na besplatni bilten informacije na email adrese. Postoji poseban obrazac za pretplatu na blog. Vidimo se kasnije.
S pojavom CSS svojstava za upravljanje uvlakama, web programeri imaju ogromne mogućnosti za upravljanje sučeljem i dizajnom web stranica. Ranije se udubljenjima upravljalo pomoću tablica, što je bilo mnogo složenije i obimnije.
Pogledajmo osnovna svojstva upravljanja odsutnošću.
Upravljanje marginama u HTML-u pomoću CSS-a pomoću svojstva margine
css svojstvo margina omogućuje točnu kontrolu vanjske margine. Recimo da postoji slika za koju morate odrediti vanjske margine: 30 piksela na vrhu, 20 na lijevoj strani, 10 na desnoj i 5 na dnu.
Za postavljanje margine na vrhu napisat ćemo: margin-top: 30px
Za postavljanje lijeve margine: margin-left: 30px
Desna margina: margin-right: 10px
I dno: margin-bottom: 5px
Sve možete kombinirati tako da napišete sljedeće: margina: 30px 10px 5px 20px;
Na primjer, postavimo ove uvlake za sliku. Dobivamo sljedeći html kod:
Možete vidjeti kako se slika pomaknula u odnosu na nadređeni element.
Ako navedete marginu: 30px, tada css ispuna bit će isti na sve četiri strane i bit će jednak 30 piksela.
Jesti opcije upute dvije i tri vrijednosti u specifikaciji: margin:10px 20px;. Ovaj parametar će osigurati da se vanjske margine na css-u pojavljuju na vrhu i dnu 10px, lijevo i desno 20px;
Dizajnerima početnicima često nije uvijek moguće odmah zapamtiti sve moguće kombinacije, tako da početne faze možete koristiti sljedeće parametre: margin-top, margin-desno, margin-left i margin-bottom. Gore - gore, desno-desno, lijevo-lijevo, dolje-dolje.
