Kreirajte prostore i fizičko razdvajanje elemenata u HTML-u pomoću CSS-a
Stvaranje prostora i fizičko razdvajanje elemenata u HTML-u može biti teško razumljivo za početni web dizajner. Ovo je zato što HTML ima svojstvo poznato kao "kolaps prostora". bez obzira da li unosite 1 razmak ili 100 u svoj HTML kod, web pretraživač automatski sruši te prostore na samo jedan prostor. Ovo se razlikuje od programa kao što je Microsoft Word , koji dozvoljava kreatorima dokumenta da dodaju više razmaka da razdvoje reči i druge elemente tog dokumenta.
Ovo nije način na koji rade razmere dizajna sajta.
Dakle, kako dodate prostore u HTML koji se pojavljuju na web stranici ? Ovaj članak ispituje neke od različitih načina.
Prostori u HTML-u sa CSS-om
Željeni način dodavanja razmaka u HTML-u je sa Cascading Style Sheets-om (CSS) . CSS treba koristiti za dodavanje bilo kakvih vizuelnih aspekata veb stranice, a pošto je rastojanje dio osobina vizuelnog dizajna stranice, CSS je tamo gde želite da se ovo uradi.
U CSS-u možete koristiti ili margine ili opcije za dodavanje da biste dodali prostor oko elemenata. Pored toga, svojstvo teksta-dodavanja dodaje prostor prednjem delu teksta, na primer za stavljanje paragrafa.
Evo primera kako koristiti CSS da dodate prostor ispred svih vaših paragrafa. Dodajte sledeće CSS na spoljašnji ili interni stilski list:
p {
tekst-indent: 3em;
}
Prostori u HTML-u: Unutar vašeg teksta
Ako želite samo da dodate dodatni prostor ili dva vašem tekstu, možete koristiti prostor koji ne raste.
Ovaj lik deluje kao standardni prostorski znak, samo se ne sruši unutar pretraživača.
Evo primera dodavanja pet prostora unutar linije teksta:
Ovaj tekst ima pet dodatnih prostora unutar nje
Koristi HTML:
Ovaj tekst ima & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; pet dodatnih prostora unutar nje
Takođe možete da koristite oznaku
da dodate dodatne linije pauze.
Ova rečenica ima pet linijskih prekida na kraju
Zašto je razmak u HTML-u loša ideja
Iako ove opcije funkcionišu - element koji ne prelomi prostor će zaista dodati razmake u vašem tekstu, a prelomi linije će dodati razmake ispod gore prikazanog paragrafa - ovo nije najbolji način za kreiranje razmaka na vašoj web stranici. Dodavanje ovih elemenata u HTML doprinosi vizuelnim informacijama koda umjesto odvajanja strukture stranice (HTML) iz vizuelnih stilova (CSS). Najbolje prakse ukazuju na to da bi trebalo da budu razdvojeni iz više razloga, uključujući lako ažuriranje u budućnosti i ukupnu veličinu datoteke i performanse stranica.
Ako koristite spoljni stilski stil da biste diktirali sve svoje stilove i razmake, onda je promena tih stilova za celu lokaciju jednostavna, jer jednostavno morate ažurirati taj stilski stil.
Razmotrite primjer iznad rečenice sa pet tagova na kraju. Ako ste želeli tu količinu razmaka na dnu svakog od pasusa, vi biste trebali dodati taj HTML kôd na svaki paragraf na celom sajtu. To je dobar iznos dodatnog označavanja koji će vam iscrpljivati stranice.
Pored toga, ako odlučite da je ovaj razmak previše ili premalo, a želite malo promeniti, potrebno je izmeniti svaki pojedinačni pasus na celoj web lokaciji. Ne hvala!
Umesto da dodate ove elemente razmaka u svoj kod, koristite CSS.
p {
padding-bottom: 20px;
}
Ta jedna linija CSS-a bi dodala razmake ispod pasusa vaše stranice. Ako ste želeli da promenite taj razmak u budućnosti, uredite ovu jednu liniju (umesto kodnog koda čitavog sajta) i dobro je ići!
Sada, ako vam treba dodati jedan prostor u jednom delu vaše web stranice, pomoću oznake
ili jednog nepropadajućeg prostora nije kraj svijeta, ali morate biti pažljivi.
Korišćenje ovih inline HTML razmaka između razmaka može biti klizav nagib. Dok jedan ili dva možda ne povrede vašu lokaciju, ako nastavite niz tu putanju, uvodite probleme na svoje stranice. Na kraju, bolje je da pređete na CSS za razmak HTML-a, kao i sve druge vizuelne potrebe web stranice.