Naudokite CSS, kad nulis būtų jūsų paraštės ir sienos

Šiame straipsnyje paaiškinta, kaip naudoti CSS iki nulio paraštės ir kraštinės, kad jūsų tinklalapiai būtų nuosekliai pateikiami kiekvienoje naršyklėje.

Marginalų ir užpildų normavimas

Geriausias būdas išspręsti nenuoseklaus langelio modelio problemą yra nustatyti visas HTML elementų paraštes ir užpildymo reikšmes į nulį. Yra keli būdai, kaip tai padaryti, tai pridėti šią CSS taisyklę prie savo stiliaus lapo:

Nors ši taisyklė yra neapibrėžta, nes ji yra jūsų išoriniame stiliaus lape, jos specifiškumas bus didesnis nei numatytosios naršyklės vertės. Kadangi tuos numatytuosius nustatymus jūs perrašote, šis vienas stilius pasieks tai, ką jūs ketinate daryti.

Kai išjungsite visas paraštes ir užpildymą, turėsite juos selektyviai vėl įjungti tam tikrose savo tinklalapio dalyse, kad išvaizda ir jaustis reikalinga jūsų dizainui.

Norėdami normalizuoti kraštines, naudokite CSS

Vyresnio amžiaus „Internet Explorer“ versijos turėjo skaidrią arba nematomą sieną aplink elementus. Jei nenustatysite krašto į 0, ta kraštinė gali sugadinti jūsų puslapio maketus. Jei nusprendėte ir toliau palaikyti šias pasenusias IE versijas, turėsite tai išspręsti pridėdami šiuos dalykus prie savo kūno ir HTML stilių:

HTML, body {
paraštė: 0px;
užpildymas: 0px;
 kraštinė: 0 taškų;
}

Panašiai kaip išjungėte paraštes ir užpildymą, šis naujas stilius taip pat išjungs numatytąsias kraštines. Taip pat galite padaryti tą patį naudodami pakaitos žymeklį, parodytą anksčiau straipsnyje.

Kodėl interneto dizainas turi nuoseklias paraštes ir sienas?

Šiandieninė interneto naršyklė nuėjo toli nuo pašėlusių dienų, kai bet koks kryžminis naršyklės nuoseklumas buvo noras. Šiandienos žiniatinklio naršyklės visiškai atitinka standartus. Jie puikiai žaidžia kartu ir pateikia gana nuoseklų puslapio rodymą įvairiose naršyklėse. Tai apima naujausias „Google Chrome“, „Microsoft Edge“, „Mozilla Firefox“, „Opera“, „Safari“ versijas ir įvairias naršykles, esančiasdaugybė mobiliųjų įrenginių šiandien patekti į svetaines.

Nors pažanga padaryta, kai naršyklės rodo CSS, vis dar yra neatitikimų tarp šių įvairių programinės įrangos parinkčių. Vienas iš dažniausiai pasitaikančių neatitikimų yra tai, kaip tos naršyklės pagal numatytuosius nustatymus apskaičiuoja paraštes, užpildymą ir kraštus.

Nes šie langelio modelio aspektai veikia visus HTML elementus ir todėl, kad jie yra būtini kuriant puslapį maketai, nenuoseklus rodymas reiškia, kad puslapis gali atrodyti puikiai vienoje naršyklėje, bet šiek tiek išjungti kitas. Norėdami kovoti su šia problema, daugelis interneto dizainerių normalizuoja šiuos dėžutės modelio aspektus. Ši praktika taip pat žinoma kaip nulinis paraštės vertės, paminkštinimasir sienos.

Pastaba apie naršyklės numatytuosius nustatymus

Kiekviena žiniatinklio naršyklė nustato numatytuosius nustatymus tam tikriems puslapio rodymo aspektams. Pavyzdžiui, hipersaitai yra mėlyni ir pagal nutylėjimą yra pabraukti. Ši elgsena yra vienoda įvairiose naršyklėse, ir nors dauguma dizainerių tai keičia, kad atitiktų dizainą konkretaus projekto poreikius, tai, kad jie visi pradeda tuos pačius numatytuosius nustatymus, palengvina jų įgyvendinimą pokyčiai. Deja, numatytoji paraštių, užpildymo ir kraštinių vertė nėra vienodo lygio naršyklėse.