Lege romten en fysike skieding fan eleminten yn HTML mei CSS
It meitsjen fan romten en fysike ôfskieding fan eleminten yn HTML kin it net maklik wêze om te begripen foar de begjin webûntwerper. Dit is om't HTML in eigendom hat neamd as "whitespace collapse". As jo 1 romte of 100 yn jo HTML-koade type, falt de webbrowser automatysk de romten yn om ien inkele romte te fallen. Dit is oars as in programma lykas Microsoft Word , dy't dokuminteskermen makket om meardere romten te foegjen om dielen en oare eleminten fan dat dokumint te trenen.
Dit is net hoe't webside ûntwerpôfstân wurket.
Dus, hoe kinne jo blêdwizers yn HTML taheakje dy't op 'e webside sjen litte? Dit artikel ûndersiket guon fan 'e ferskillende wizen.
Spaces yn HTML mei CSS
De foarkommende manier om romten yn jo HTML te foegjen is mei Cascading Style Sheets (CSS) . CSS moat brûkt wurde om alle fisuele aspekten fan in webside te foegjen, en om't de ôfstân in diel is fan 'e fisuele karakteristike skaaimerken fan in side, CSS is wêr jo wolle dat dit dien wurde.
Yn CSS kinne jo gebrûk meitsje fan 'e marzje of padding-eigenskippen om romte om eleminten te foegjen. Dêrnjonken wurdt de tekst-ûnthâldige eigendom romte oan 'e foarkant fan' e tekst, lykas foar yntellende paragrafen.
Hjir is in foarbyld fan hoe't jo CSS brûke om romte te foegjen foardat jo al jo ôfdielingen binne. Foegje de folgjende CSS oan jo eksterne of ynterne stylblêd:
p {
text-indent: 3em;
}
Spaces yn HTML: binnen jo tekst
As jo in ekstra romte of twa oan jo tekst taheakje wolle, kinne jo de net brekbere romte brûke.
Dit karakter makket krekt as in standert romte-karakter, allinich is it net yn 'e browser brocht.
Hjir is in foarbyld fan hoe't jo fyffere plakken yn in teken fan tekst taheakje:
Dizze tekst hat fiif ekstra plakken binnen it
Brûkt de HTML:
Dizze tekst hat & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; fiif ekstra plakken binnen it
Jo kinne ek de tagelgong brûke om ekstra linebreken te foegjen.
Dizze sin hat fiif line breuken oan 'e ein fan it
Wêrom in HTML-ôfdieling is in Bad Idea
Wyls dizze opsjes sawol wurkje - it net-brekbere romte-elemint sil tenei ôfbrekke oan jo tekst en de line brekken sille de ôfstân tafoegje ûnder de hjirboppe - hjirboppe - dit is net de bêste manier om ôfstimming yn jo webside te meitsjen. It tafoegjen fan dizze eleminten nei jo HTML foeget gegevens foar de koade ta ynstee fan it strukturearjen fan in side (HTML) fan 'e fisuele stilen (CSS) te skieden. Best practices dictate dat dit foar in oantal redenen apart wêze moat, wêrûnder it lûd fan aktualisearjen yn 'e takomst en algemiene triemgrutte en side-prestaasje.
As jo in ekstern stylblêd brûke om alle stilen en ôfstannen te diktearje, dan feroaret dy stilen foar de folsleine side maklik om te dwaan, om't jo gewoan in stylblêd te aktualisearje moatte.
Besykje it foarbyld boppe fan 'e sin mei fiif etiketten oan' e ein fan 'e sin. As jo dat bedrach op 'e boaiem fan elke lid woe, moatte jo it HTML-koade oan elke lid op jo folsleine side taheakje. Dat is in juste oantal ekstra markearring dy't jo siden bloeie sil.
Dêrneist as jo de dyk bepale dat dizze ôfstân te folle of te min is, en jo wolle it mar wizigje, jo moatte elke paragraaf yn jo hiele webside bewurkje. Nee Tankewol!
Ynstee fan dizze romte-eleminten oan jo koade te brûken, brûke CSS.
p {
padding-bottom: 20px;
}
Dat ien line fan CSS soe de ôfstân ûnder de paragrafen fan jo side taheakje. As jo dizze ôfstimming yn 'e takomst wizigje woe, bewurkje dizze iene line (ynstee fan jo folsleine side) en jo binne goed om te gean!
No, as jo in ienige romte taheakje moatte yn ien diel fan jo webside, brûk in
tag, of in inkele net brekbere romte is net it ein fan 'e wrâld, mar jo moatte foarsichtich wêze.
Mei dizze ynlade HTML-ôfstânopsjes kinne jo in glide steig wêze. Wylst ien of twa net jo webside ferwiderje, as jo dizze paad fierder folgje, sille jo problemen yn jo siden ynfiere. Op it lêst binne jo better ôfwikend nei CSS foar HTML-ôfstân, en alle oare webside visuele behoeften.