Pre začínajúceho webdizajnéra môže byť ťažké vytvoriť medzery a fyzické oddelenie prvkov v HTML. To je preto, že HTML má vlastnosť známu ako „kolaps medzier“. bez ohľadu na to, či do kódu HTML napíšete 1 medzeru alebo 100, webový prehliadač tieto medzery automaticky zbalí na iba jednu medzeru. To sa líši od programu ako Microsoft Word, ktorá umožňuje tvorcom dokumentov pridať viac medzier na oddelenie slov a ďalších prvkov tohto dokumentu. Takto nefunguje medzery v dizajne webových stránok.
Ako teda pridáte medzery v HTML, ktoré sa zobrazia na serveri webovú stránku, ktorú ste vytvorili? Tento článok skúma niektoré z rôznych spôsobov.
Medzery v HTML s CSS
Preferovaný spôsob pridávania medzier do vášho HTML je pomocou Kaskádové štýly (CSS). Na pridanie akýchkoľvek vizuálnych aspektov webovej stránky by sa mal použiť CSS, pretože medzery sú súčasťou charakteristík vizuálneho dizajnu stránky, preto je potrebné vytvoriť CSS.
V CSS môžete na zväčšenie priestoru okolo prvkov použiť vlastnosti okraja alebo výplne. Vlastnosť odsadenie textu navyše pridáva priestor na prednú časť textu, napríklad na odsadenie odsekov.
Tu je príklad toho, ako používať CSS na pridanie medzery pred všetky vaše odseky. Pridajte do svojho súboru CSS nasledujúce externý alebo interné šablóna štýlov:
p {
zarážka textu: 3em;
}
Medzery v HTML vo vašom texte
Ak chcete do svojho textu iba pridať ďalšie dva medzery, môžete ich využiť. Tento znak funguje rovnako ako štandardný znak medzery, iba sa nezhroutí vo vnútri prehliadača.
Tu je príklad toho, ako pridať päť medzier do riadku textu:
Tento text má v sebe päť ďalších medzier
Používa HTML:
Tento text má v sebe päť ďalších medzier
Môžete tiež použiť
značka na pridanie ďalších riadkov.
Táto veta má na konci päť riadkov
Prečo je medzery v HTML zlý nápad
Aj keď obe tieto možnosti fungujú - prvok nerozlomiteľných medzier skutočne pridá do textu a riadku medzery zalomenia pridajú medzery pod odsek zobrazený vyššie - to nie je najlepší spôsob, ako vytvoriť medzery vo vašom webstránka. Pridaním týchto prvkov do kódu HTML pridáte do kódu vizuálne informácie namiesto toho, aby ste oddelili štruktúru stránky (HTML) od vizuálnych štýlov (CSS). Osvedčené postupy diktujú, že by mali byť oddelené z mnohých dôvodov, vrátane ľahkej aktualizácie v budúcnosti a celkovej veľkosti súboru výkon stránky.
Ak na diktovanie všetkých svojich štýlov a medzier použijete externú šablónu štýlov, potom je ľahké zmeniť tieto štýly pre celý web, pretože musíte jednoducho aktualizovať túto jednu šablónu štýlov.
Zvážte vyššie uvedený príklad vety s piatimi
značky na jej konci. Ak by ste chceli túto veľkosť medzery v dolnej časti každého odseku, bolo by potrebné pridať tento kód HTML do každého odseku na celom vašom webe. To je značné množstvo ďalších značiek, ktoré vaše stránky nafúknu. Ak sa navyše rozhodnete, že tieto medzery sú príliš veľké alebo príliš malé a chcete ich trochu zmeniť, budete musieť upraviť každý odsek na celej svojej webovej stránke. Nie ďakujem!
Namiesto pridania týchto medzier do kódu použite CSS.
p {
polstrované dno: 20px;
}
Ten jeden riadok CSS by pridal medzery pod odsekmi vašej stránky. Ak chcete v budúcnosti zmeniť tento rozstup, upravte tento jeden riadok (namiesto kódu celého svojho webu) a môžete vyraziť!
Ak teraz potrebujete pridať jednu medzeru do jednej časti svojej webovej stránky, použite a
značka alebo jediný nerozbitný priestor nie je koniec sveta, musíte však byť opatrní. Použitím týchto možností vloženého riadkovania HTML môže byť kĺzavý sklon. Aj keď jeden alebo dva nemusia poškodiť váš web, ak budete pokračovať v tejto ceste, spôsobíte tým svojim stránkam problémy. Nakoniec je lepšie obrátiť sa na medzery HTML vo formáte CSS a vo všetkých ostatných vizuálnych potrebách webových stránok.