Hoe brûke HTML en CSS om ljeppers en ôfstimming te meitsjen

In sjogge hoe't wyt romte yn HTML behannele wurdt troch browsers

As jo ​​in begjin webûntwerper binne, ien fan 'e soad dingen dy't jo earst begripe moatte, is de wize wêrop't wite romte yn in side's koade troch webblêders behannele wurdt.

Spitigernôch is de wize wêrop blêdwizers de wite romte behannele binne, net tige yntuitive op it earste, foaral as jo yn HTML komme en fergelykje mei hoe't wyt romte behannele is yn wurdferwurkingsprogramma's, dy't jo meimakke kinne.

Yn wurdferwurkingssoftware kinne jo in protte ôfstannen of ljepblêden yn it dokumint tafoege en dizze ôfstân sil werjûn wurde yn it display fan de ynhâld fan 'e dokumint. Dit is net it gefal by HTML of mei websiden. As sadanich learde hoe't wite romte is, yndie, troch webblêders behannele is, is tige wichtich.

Ôfstân yn Print

Yn 'e word processing software binne de trije primêre wite romte-karakteren de romte, tab en weromreis. Elk dêrfan dogge op ferskillende wize, mar yn HTML, browsers jouwe se allegear itselde. Oft jo ien romte of 100 spaasjes yn jo HTML-markearring opstelle, of jo ôfspraak meitsje mei ljeppers en wiksels werom, sille allegear oan ien romte kondenseard wurde as de side troch de browser feroare wurdt. Yn 't web design terminology is dit bekend as wite romte. Jo kinne dizze typyske ôfstânsteken net brûke om websiden te meitsjen op in webside, om't de browser meardere spaasjes falt yn ien inkele romte yn 'e browser,

Wêrom hat inkele ljeppers brûke?

Typysk as minsken brûke ljeppers yn in tekstdokum, brûke se se foar layout-redenen of om de tekst te krijen om nei in bepaald plak te foarkommen of in bepaald ôfstân fan in oar elemint te wêzen. Yn webûntwerp kinne jo dizze eardere romte-tekens net brûke om dizze fisuele stilen of ferplichte nedich te meitsjen.

Yn webûntwerp soe it gebrûk fan ekstra bepaalde karakters yn 'e koade wêze foar it maklik fan it lêzen fan dizze koade. Webûntwerpers en ûntwikkelders brûke faak brûke ljepblêden om indent-koade te selektearjen sadat se sjen kinne hokker eleminten bern fan oare eleminten binne - mar dy yndrukken hawwe gjin ynfloed op it byld fan 'e side sels. Foar dy gebrûklike feroare wizigingen nedich binne, moatte jo nei CSS (kaskadierende stylblêden) wikselje.

Brûk CSS om HTML ljeppers en ôfstimming te meitsjen

Websiden hjoed binne boud mei in skieding fan struktuer en styl. De struktuer fan in side wurdt behannele troch de HTML, wylst de styl troch de CSS diktearre is. Dit betsjut dat jo in bepaalde layout meitsje kinne, dan moatte jo nei CSS wikselje en net probearje om gewoane tekens oan de HTML-koade te ferpleatsen.

As jo ​​besykje tabblêden te brûken om tekstdielen te meitsjen, kinne jo gebrûk meitsje fan

eleminten dy't posityf binne mei CSS om dit kolomblêd te krijen. Dizze posysjeing kin makke wurde troch CSS-float, absolute en relative posysje, ofnijer CSS-layouttekeningen lykas Flexbox of CSS Grid.

As de gegevens dy't jo útlizze binne tabulêre gegevens, kinne jo tafels brûke om dizze gegevens te learen lykas jo wolle. Tafels krije faak in swak rap yn webûntwerp om't se sa lang net as reine ynstrings ark binne misse, mar tabellen binne noch altyd perfoarst jildich wannear't jo ynhâld de databele tabelere gegevens befetsje.

Marginen, padding, en tekst-ynsletten

De meast foarkommende manieren om ôfstân te meitsjen mei CSS is troch te brûken ien fan de folgjende CSS-stilen:

Jo kinne bygelyks de earste line fan in paragraaf ynstelle as in ljepper mei de folgjende CSS (note dat dit jo foarkommen hat in kloft attribút fan "earste" oanbean oan):

p.first {
text-indent: 5em;
}

Dizze paragraaf soe no 5 oantekeningen oanpakt wurde.

Jo kinne ek de marzje- of padding-eigenskippen brûke yn CSS om de ôfstân oan 'e boppeste, boppe, lofts of rjochts (of kombinaasjes fan dy kanten) fan in elemint te foegjen. Uteinlik kinne jo in soarte fan ôfstân dwaan dy't nedich binne troch te wikseljen nei CSS.

Ferwiderje tekst mear as ien romte sûnder CSS

As jo ​​alles wolle, is jo tekst om mear as ien romte te ferpleatse fan it foarige item, kinne jo de net brekbere romte brûke.

Om de net-brekbere romte te brûken, taheakje jo allinich & nbsp; sa lang as jo it nedich hawwe yn jo HTML-markearring.

Bygelyks, as jo jo wurd fytsen plakken ferpleatse woe, kinne jo it folgjende taheakje foardat it wurd is.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML respektearret dizze en sil har net op ien inkele romte ferfalle. Dit wurdt lykwols beskôge as in tige minere praktyk omdat it ekstra HTML markearring oanfollet oan in dokumint allinich om 'e layoutbedriuwen te berikken. It weromjaan fan dizze ôfskieding fan struktuer en styl, moatte jo foarkomme om tafoegingen net-brekbere romten te brûken om gewoan in gewoane layout-effekt te realisearjen en CSS-marginen en padding te brûken.