Raumplazen a physikalesch Trennung vun Elementen an HTML mat CSS erstellen
Raum platzéieren an physesch Trennung vu Elementer an HTML kënnen schwéier fir den Ufank Webdesigner ze verstoen. Dëst ass well HTML eng Eegiel bekannt als "Whitespace" ass. Egal wéi Dir 1 Space oder 100 an Ärem HTML Code hutt, brécht de Webbrowser dës Plazen automatesch an nëmmen een eenzegen Raum. Dëst ass ënnerschiddlech vun engem Programm wéi Microsoft Word , wat d'Dokumeschafte erméiglecht et méi Späicher ze addéieren fir Wierder an aner Elementer vun deem Dokument ze trennen.
Dëst ass net wéi d'Websäit Designabréckung funktionnéiert.
Also, wéi fü wéiweit Dir Whitespace an HTML, déi op der Websäit kucken ? Dësen Artikel iwwerpréift e puer vun de verschiddenen Weeër.
Spaces an HTML mat CSS
Déi léifste Plaz fir Plaz an Ärem HTML ze addelen ass mat Cascading Style Sheets (CSS) . CSS sollt benotzt ginn fir visuell Aspekter vun enger Websäit ze addéieren, a well de Distanzbestëmmung Deel vun den visuellen Designmerkmäiten vun enger Säit ass CSS wou Dir wëllt dat maachen.
An CSS kënnt Dir d'Margin oder d'padding-Propéit benotze fir Elemente ronderëm Elemente ze vergréisseren. Zousätzlech ass d'Text-onent Eegeschafte Plaz un der Voreit vum Text, wéi zum Beispill onendéierte Paragraphen.
Hei ass e Beispill vir wéi Dir CSS benotzt fir Plaz virun all Ären Absätze ze maachen. Füügt d'folgend CSS op äussert oder interne Stylblatt:
p {
Text-Indent: 3em;
}}
Spaces am HTML: Insider Text
Wann Dir just een zousätzleche Raum oder zwee an den Text kënnt addéibar, kënnt Dir de net brechend Raum benotzen.
Dëse Charakter handelt genee wéi e Standardraum Zeechen, just dat ass net am Browser briechen.
Hei ass e Beispill fir wéi Dir fënnef Plaze bannen innerhalb enger Zeil vum Text setzt:
Dësen Text huet fënnef Extra Plazen a
D 'HTML:
Dësen Text huet & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; fënnef Extra Plazen a
Dir kënnt och de Schluss mat der Zousatzpausen bréngen.
Dëse Saz huet fënnef Linn Bruch am Ende vu senger Zäit
Firwat Ableen an HTML ass eng Bad Idea
Och wann dës Optiounen esou funktionnéieren - d'Element vun der net brechplaatzem Plaatz huet souguer de Spacing an Äre Text ze addéieren an d'Zeilenunterbrechung de Spacing ënnert de Paragrappi uewe genannt - dat ass net de beschte Wee fir d'Ableitt op Är Websäit ze schafen. Dës Elementer ze addéieren op Äert HTML fügen visuell Informatiounen op den Code anstatt datt d'Struktur vun enger Säit (HTML) vun den visuelle Stiler (CSS) getrennt gëtt. Best Practices diktéieren datt dës separat aus verschiddene Grënn getrennt sinn, och d'Méiglechkeet ze aktualiséieren an der Zukunft an der gesamter Dateigréisst an der Websäit.
Wann Dir e externe Formblatt benotzt fir all Är Stile a Stied ze diktéieren, da kënnt Dir Äert Styles fir déi ganz Websäit veränneren, well Dir musst just ee Stilblatt aktualiséieren.
Bedenkt d'Beispiller uewendriwwer vum Saz mat fënnef Stäck am Schluss. Wann Dir dëse Betrag am Abstand op alldeegleche Paragraf wënscht, musst Dir dëse HTML Code op all Paragraf an Ärem ganze Site erofhuelen. Dat ass e fairen Zousatz vun extrae Markup deen Dir Är Säiten verschlëmmert.
Zousätzlech, wann Dir de Wee entscheeden datt dës Distanz zevill oder ze kuerz ass, an Dir wëllt e bëssen änneren, musst Dir all eenzel Paragrap an der gesamter Websäit editéieren. Keen Merci!
Stellt Iech dëst Ableant Elementer op Ärem Code hinzuweisen, CSS benotzen.
p {
padding-bottom: 20px;
}}
Dat eng Zeil vu CSS géing en Abstand vun de Säiten vun denge Säiten addéieren. Wann Dir wëllt dat Abschnëtt an Zukunft änneren, ët änneren dës Säit eng Zeil (amplaz vun Ärem komplette Site) an Dir sidd gutt fir ze goen!
Elo, wann Dir eng eenzeg Plaz an engem Deel vun Ärer Websäit dobausse braucht, mat engem
Etikett oder engem eenzegen net breetgefäegene Raum ass net d'Enn vun der Welt, awer Dir musst vorsichtlech sinn.
Mat dësen Inline-HTML-Distanzoptiounen ka mat engem rëse Hang. Wann een oder zwee nett Är Site verletzen, wann Dir dës Säit weiderfuere gitt Dir Probleemer an Är Säiten virstellen. Am Endeffekt wäerte Dir besser op CSS fir HTML Abstand maachen, an all aner Websäit visuelle Besoinen.