Mga setting sa CSS: line spacing

Sa CSS, ang distansya sa pagitan ng mga linya ay masyadong madaling i-set. Para sa layuning ito doon ay isang espesyal na ari-arian. Ngunit, siyempre, may mga maraming iba pang mga parameter, na kung saan ay unibersal at maaaring ilapat sa ang teksto.

Kung walang adjustment ay tapos na, ikaw ay naka-set sa default na halaga. maaari mong baguhin ang distansya kung ninanais. Ang halaga ay maaaring alinman sa isang porsyento o pixels.

hilera Taas

Ang CSS distansya sa pagitan ng mga linya ay maaaring ipinapakita ng ang mga sumusunod na figure.

Sa larawan sa itaas ay nagpapakita ng mga parameter na may kaukulang mga distansya. Ang teksto ay sa space font-size. Tandaan na ang text line ay hindi magsisimula sa base at bahagyang mas mataas. Ang puwang na ibinigay sa ibaba upang titik saan mayroon ibaba elemento (g, y, at iba pa).

Tandaan na ang puwang sa pagitan ng mga bloke font-size ay tinatawag na humahantong. Sa pamamagitan ng HTML at CSS sa property na ito ay hindi lilitaw, ngunit ito ay sa iba pang mga graphic at teksto ng editor. Halimbawa, sa Adobe Photoshop.

Ang figure sa itaas ay nagpapakita kung saan sa "Photoshop", maaari mong tukuyin ang mga nangungunang mga. At susunod na tinukoy font-size na setting.

Mga halimbawa ng paggamit ng line-height

Sa CSS, ang distansya sa pagitan ng mga linya ay maaaring itakda porsyento. Isang nakapagpapaliwanag halimbawa ay ibinigay sa ibaba.

Sa kaso ng mga maliliit na mga halaga ng mga gumagamit ng iyong site ay magiging maginhawa upang basahin.

distansya ay maaaring maging iba-iba at ang laki ng font. Kung ang pagkakaiba sa pagitan ng mga pangunahing mga parameter ay lubhang naiiba sa mga numero, ang pagkakaiba ay bayad sa pamamagitan ng pagtaas nangungunang.

subtleties ng disenyo

Ang CSS distansya sa pagitan ng mga linya ay maaaring higit pang ipasadya ang iba't-ibang mga mag-uusod. Isaalang-alang ang halimbawa sa figure.

Sa "Sangkap" sa kasong ito ay ang teksto. Padding - padding ay sa loob ng object, at ang margin - ang indentation ng object. Border - ito frame. Maaari itong maging 0 pixels, at maaaring maging 100.

Ang sumusunod na larawan ay agad-agad ang lahat ng mga margin, ang frame at ang taas ng isang linya ng teksto.

Kung mayroon kang isang maliit na teksto, ang lahat sa isang solong linya, o ang bawat linya sa isang hiwalay na talata, ang distansya ay maaring iakma sa pagitan ng mga naka-indent talata. Iyon ay maring at padding sa pagitan ng mga linya sa isang cell ay hindi magkakaroon ng epekto. Sila ay gumawa ng indentation lamang sa mga gilid ng object. Bagay - ang buong talata, sa halip ng mga linya sa loob nito. Ito ay mahalaga na hindi makakuha ng nalilito.

Sa mga kaso kung saan ang isang malaking bilang ng mga hilera, ang lahat ng kung saan ay matatagpuan sa parehong bagay, ang font ay inirerekomenda upang baguhin ang mga pangunahing mga parameter.

Paano upang madagdagan ang distansya sa pagitan ng mga linya ng CSS

Ang distansya sa pagitan ng mga linya ng HTML, maaari kang magrehistro sa anumang klase o para sa lahat ng mga talata sa teksto. Kung tinukoy mo ang ganito: p {line-height: 20px; } - at pagkatapos ay ganap na ang lahat ng mga talata sa pahina ay magiging mga string ng 20 pixels. Kung nais mong sa iba't ibang lugar sa iba't ibang laki, ito ay inirerekomenda na gawin ang mga sumusunod.

mag-utos kami estilo.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Para sa kalinawan, magdagdag kami ng isang frame, kaya maaari mong makita na ito gumagana. Sa hinaharap, dapat itong maalis.

Susunod, kami ay gumagamit ng mga klase. Ang resulta ay tulad ng sumusunod.

Tandaan na sa ikatlong kaso, ang banda ay nagdulot sa teksto. Ang lahat dahil sa ang katunayan na ang laki ng font ay mas malaki kaysa sa taas ng linya. Samakatuwid, ito ay mahalaga upang matiyak na ang mga naturang salungatan ay hindi. Kung ikaw ay paggawa ng isang maliit na taas ng linya, ayon sa pagkakabanggit, bawasan ang font.

Ito ay hindi inirerekomenda na gawin ng masyadong maliit na teksto at isang maliit na distansya sa pagitan ng mga linya. Dahil wala sa mga gumagamit ay hindi magagawang upang basahin ang lahat ng ito mahinahon. Mabilis siyang pagod na mga mata. Mga search engine na din sabihin na ang teksto ay user-friendly.

Bukod dito, sa mga nakaraang taon mayroong isang malakas na diin sa kakayahang magamit para sa mga user ng mobile. Mayroong mga rekomendasyon ay palaging sinabi na ang laki ng font ay dapat maging normal, hindi maliit. Lalo madiin naming nakakaapekto sa reference. Sa kanilang maliit na sukat user ay mahirap na gamitin navigate sa site.

Sa search engine "Google" ay isang espesyal na tool na tumutulong sa pag-aaral. Ito ay tunay na maginhawa para sa mga webmaster.

Narito ang isang halimbawa ng mga resulta na maaaring maging.

Ito ay inirerekumenda na gumamit ng mga tip na ito dahil ang mga pamantayan makakaapekto sa mga resulta ng paghahanap.