li css padding. Paraščių ir užpildymo išdėstymas CSS

Kuriant bloką su nuorodų sąrašu, paprastai rekomenduojama naudoti rodymo savybę su bloko arba inline-block atributais, kurie padidins aktyvaus saito lauko dydį. Dideli aktyvūs nuorodų laukai pagerina elementų naudojimą, o didelius elementus lengviau naršyti pele.

Elementai su ekranu: blokas pateikiami kaip bloko elementai.

Elementas su ekranu: inline-block pateikiamas kaip bloko elementas, kuris apgaubia kitus elementus, tarsi jis būtų įterptasis. Turinys suformatuotas kaip bloko elementas, o pats elementas – kaip eilutinis.

Pažvelkime į paprastą pavyzdį su nuorodų sąrašu:

Šis mažas
paršelis nuėjo pas
turgus

Jei nekeičiate nuorodų stiliaus, tada jų aktyvių laukų dydis atitinka juose esančio teksto dydį.

Galime tai pagerinti padarydami aktyvaus lauko dydį pirminio elemento pločiu.

Ul a ( ekranas: blokas; )

Mes galime padaryti dar geriau.

Įsitikinkite, kad sąrašo elementai neturi laukų, skirtingai nei nuorodose.
Nuorodos neturi paraščių, nes paraštės nėra aktyvi elementų sritis.

ul li ( užpildymas: 0; paraštė: 0; ) ul a ( užpildymas: 5 pikseliai; ekranas: blokas; )

Straipsnis susideda iš akivaizdžių dalykų, tačiau gana dažnai internete galime rasti nuorodų blokų, kurių „nesugadintos“ padidinti aktyvūs laukai.

Originalus straipsnis: Neleiskite paraščių nuo nuorodų sąrašų Autorius: Chrisas Coyier, 2010-11-29

Užduotis

Pašalinkite užpildus aplink ženkleliais arba sunumeruotus sąrašus.

Sprendimas

Naudokite paraštės ir užpildymo stiliaus ypatybę su nuline UL arba OL parinkiklio reikšme, priklausomai nuo sąrašo tipo, kaip parodyta 1 pavyzdyje.

1 pavyzdys: Sąrašo įtrauka

HTML5 CSS 2.1 IE Cr Op Sa Fx

Sąrašo įtrauka

Čeburaška
Krokodilas Gena
Shapoklyak

Šio pavyzdžio rezultatas parodytas fig. 1.

Ryžiai. 1. Sąrašas be vertikalių ir horizontalių įtraukų

Atkreipkite dėmesį, kad sąrašo žymekliai, rodomi kairiajame tinklalapio krašte, išnyksta. Jei norite pašalinti tik viršutinę ir apatinę paraštes, neperkeldami sąrašo į kairę, naudokite ypatybes paraštės viršuje ir paraštės apačioje (2 pavyzdys).

2 pavyzdys: Sąrašo įtrauka

HTML5 CSS 2.1 IE Cr Op Sa Fx

Sąrašo įtrauka

Čeburaška
Krokodilas Gena
Shapoklyak

Kurios naršyklės įdiegiamos pagal numatytuosius nustatymus? Panašus klausimas dažnai kyla pradedantiesiems maketuotojams, norintiems pašalinti tokias įtraukas iš tokių elementų kaip HTML lentelės (žyma) ir jų langeliai ir kt. Tiesą sakant, nėra nieko paprastesnio, bet pirmiausia išsiaiškinkime: ar ieškodami atsakymo į šį klausimą turite omenyje įdubimus?

CSS yra dviejų tipų ypatybės, kurios valdo elementų užpildymą (CSS) ir paraštes (CSS). Jų vietos parodytos paveikslėlyje:

Taigi, kai daugelis naujokų sako, kad nori pašalinti elemento užpildą, jie iš tikrųjų turi omenyje jo paraštes, nes būtent tai naršyklės paprastai prideda prie kai kurių elementų. Ne, įtraukos, žinoma, taip pat pridedamos, tačiau tokių elementų yra labai mažai; pavyzdžiui, žymos ir naršyklės nustato nulines įtraukas, kad mygtukų tekstas netilptų į rėmelį.

Situacija šiek tiek skiriasi su HTML lentelėmis, nes jos turi dar du parametrus - CSS ypatybę, kuri keičia atstumą tarp langelių kraštinių ar rėmelių (kuris taip pat gali būti vadinamas užpildymu) ir CSS ypatybę, kuri visiškai pašalina šį atstumą ir padaro bendros sienos. Žemiau esančiame paveikslėlyje parodytas visų šių paraščių ir užpildų išdėstymas ant stalo.

Į ką čia reikia atkreipti dėmesį. Na, pirma, lentelės langeliuose nėra laukų įprasta prasme, jie naudojami, antra, žyma turi ir paraštes, ir įtraukas, kaip įprastas HTML elementas. Na, trečia, įtrauką nuo vidinio lentelės krašto iki langelių sudaro lentelės vidinės įtraukos dydis, prie kurio pridedamas atstumo tarp langelių dydis.

Na, o dabar, kai visa tai žinote, pažvelkime į kelis pavyzdžius.

Kaip pašalinti paraštes nuo HTML puslapio kraštų

HTML ir CSS pavyzdys: įtraukų pašalinimas iš žymos BODY

svetainė – pašalinkite užpildymą iš puslapio kraštų

Puslapio turinys.

Pavyzdžio aprašymas

Norėdami vizualiai kurti sąrašus, visos populiarios naršyklės nustato žymos paraštes ir įtraukas, o paraštes nustato tik viršuje ir apačioje (pvz., pastraipas), ir tik vidinę įtrauką kairėje, kad sąrašo elementai būtų perkelti į dešinę. Tačiau dėl patikimumo iš žymos taip pat buvo pašalintos paraštės ir užpildymas, jei kuri nors naršyklė nuspręstų elgtis kitaip nei visos kitos. Beje, toks požiūris vadinamas iš naujo nustatyti CSS, galite perskaityti.

Kaip pašalinti įtraukas iš lentelės

HTML ir CSS pavyzdys: užpildymo pašalinimas tarp lentelės langelių

svetainė – įtraukų pašalinimas iš HTML lentelės

Pirma lentelė

1.1 langelis	1.2 langelis
2.1 langelis	2.2 langelis

Antra lentelė

1.1 langelis	1.2 langelis
2.1 langelis	2.2 langelis

Trečia lentelė

1.1 langelis	1.2 langelis
2.1 langelis	2.2 langelis

Pavyzdžio aprašymas

Siekiant didesnio aiškumo, prie lentelių ir langelių buvo pridėti rėmeliai. Pirmajai lentelei nepritaikiau jokių specialių stilių, kad matytumėte, kad naršyklės pagal nutylėjimą neprideda lentelių paraščių ar užpildų, o nustato tik nedidelį atstumą tarp langelių. Tai mes išvalysime.

CSS ypatybė :collapse buvo pritaikyta antrajai lentelei, todėl gretimų langelių ribos tapo bendros. Bet trečiame atstumas tarp langelių buvo tiesiog atstatytas į nulį, tačiau jų kraštinės (rėmai) liko savo vietose, tai labai aiškiai matosi iš būdingo rėmelių sustorėjimo. Natūralu, kad sustorėjimas neįvyko, rėmeliai lentelėje tiesiog „prilipo“ vienas prie kito.

Apskritai, kaip matote, abu šie metodai padeda pašalinti įtraukas lentelėje, tik jie tai daro šiek tiek kitaip.

Inline blokai (inline-block) daugeliu atvejų yra labai patogus žymėjimo įrankis. Jų naudojimo pavyzdžių rasite straipsniuose.

Kartu su jais yra ir spąsta. Netgi sakyčiau, visas grindinys. Ar nori jį pamatyti? Įdėkite kelis eilutinius elementus (arba eilutinius blokus) iš eilės.

Tarkime, kad turime šį HTML:

Storki.
Tiesiog
linijos

Elementų kūrimas mažosiomis raidėmis:

Li( ekranas: įdėtas; )

...arba eilučių blokai:

Li( display:inline-block; /* Kitos dvi IE6-7 eilutės – imituoja eilutinio bloko veikimą */ //display:inline; zoom:1; )

Problema

Dauguma naršyklių atskiria eilutinius blokus (elementus) įtraukomis. Kad būtų lengviau suvokti, blokelius šiek tiek nuspalvinau.

Oi! Kokie įdubimai? Nieko panašaus aš neišrašiau!

Sutarkime, kad toliau rašysiu tiesiog „inline block“ ir turiu omenyje „inline blokas ( :inline-block) arba tiesiog eilutinis elementas (display:inline)“, nes jie turi visiškai bendrą problemą ir ji taip pat nagrinėjama tame pačiame. būdu.

Ką mes gydome?

Taigi įterptieji blokai dabar turi paslaptingas įdubas. Žinoma, tai taikoma ne tik sąrašams. Grupė, esanti iš eilės, pavyzdžiui, „ov“, elgsis taip pat.

Teisybės dėlei reikia pažymėti, kad IE6 ir IE7 viską pateiks be įtraukos:

Taip noriu, kad būtų rodomos visos naršyklės!

Mes nesigilinsime į klausimą, kas teisus, o kas neteisus (skaitykite - kreivai palaiko standartus), tiesiog pasieksime suderinamumą tarp naršyklių. Labai patogu, kai elgesys yra nuspėjamas – nenustačiau jokių įtraukų, vadinasi, man jų piešti nereikia!

Tiesą sakant, viskas paprasta – norėdami pašalinti įtraukas, turite suprasti, iš kur jos atsirado!

Iš kur atsiranda įdubimai?

Ir tai nesunku suprasti. Pakanka tik įrašyti žymas vienoje eilutėje:

Storki.
Tiesiog
linijos

Stebuklai! Įdubimai išnyko savaime! Išvada: juos generuoja nematomi simboliai tarp žymų – brūkšneliai arba tarpas.

Žinoma, „viską rašyti vienoje eilutėje“, nors tai yra kelių naršyklių problemos sprendimas, dėl akivaizdžių priežasčių (kas rašo be įtraukų?) čia nesvarstoma. Ieškome kitų būdų.

Žemyn su įdubimais!

Kadangi įtrauką sukuria simboliai iš konteinerio, protinga idėja būtų „neutralizuoti“ šiuos simbolius – nustatyti juos į :0; (svarbiausia nepamiršti, kad šis turtas yra paveldimas ir nutraukti jį patiems palikuonims):

Ul( šrifto dydis: 0; ) li( šrifto dydis: 14 pikselių; ekranas: įterptas; )

Tobulas sprendimas! Linijų blokai tikrai prispausti vienas prie kito. Vis dar yra nedidelė kosmetinė problema: kai kuriose naršyklėse (pavyzdžiui, „Opera 9.5“ ir senesnėse versijose) pirminio elemento viršuje arba apačioje yra įtrauka (paveikslėlyje pirminis elementas užpildytas šviesiai pilkai žalia spalva):

Paveikslėlis padidintas taip, kad būtų matomos vertikalios įtraukos

Ši problema yra panaši į aprašytą straipsnyje ir sprendžiama maždaug taip pat: pridėti :0; (vėlgi nepamirškite sutapti su palikuoniu). Taigi gauname:

Ul( šrifto dydis: 0; eilutės aukštis: 0; ) li( šrifto dydis: 14 pikselių; eilutės aukštis: normalus; /* arba kita tinkama reikšmė */ display: inline; )

Ar dabar viskas gerai ir gerai? Ne taip!

Bėdos kilo iš ten, kur to nesitikėjome

Matyt, šios įdubos tikrai turėtų būti! Tai patvirtina du tvirti argumentai:

IE6-7 jų nebraižo;
Nepaisant mūsų pastangų, Webkit naršyklės vis tiek jas piešia.

Taip taip! Ir „Safari“, ir „Chrome“, po visų pirmiau minėtų gudrybių, tiesiog sumažino užpildymą nuo trijų pikselių iki vieno!

Užsispyrę interneto rinkiniai nenori pasiduoti!

Nicko 2011 m. liepos 3 d. atnaujinimas. FF pateikė dar vieną paslėptą staigmeną. Jei keičiate puslapio mastelį, kartais viršuje yra papildomas 1 pikselio užpildymas. Tai galima išgydyti pridedant rodymo taisyklę: -moz-inline-stack;

Paskutinis sprendimas

Webkit buvo galima įveikti naudojant :-1px. Tačiau žalingo šalutinio poveikio nerasta (nebent, žinoma, pamirštumėte nepaisyti palikuonių nuosavybės).

Galutinis CSS su kryžminiu naršyklės sprendimu įterptiesiems elementams:

Ul( šrifto dydis: 0; /* pašalinti horizontalų tarpą */ eilutės aukštis: 0; /* ... ir vertikalią kai kuriose naršyklėse */ tarp raidžių: -1 piks.; /* įtikinti žiniatinklio rinkinį */ ) li ( šriftas -size:14px; /* Nepamirškite atkurti normalių reikšmių */ eilutės aukštis: normalus; tarpai tarp raidžių: normalus; ekranas: įterptas; )

Eilutiniams blokams:

Nepamirškite, kad mastelio keitimo ypatybė negalioja. Todėl kovos sąlygomis įdėkite jį į atskirą CSS, prijungtą naudojant .

Gali būti naudinga perskaityti: