La retumilo de hodiaŭ venis longan vojon de la frenezaj tagoj, kie ajna speco de transversa retumilo konsideras deziron. La retumiloj de hodiaŭ estas ĉiuj tre normalaj. Ili ludas bonege kune kaj liveras sufiĉe koheran paĝon montriĝi tra la diversaj retumiloj. Ĉi tio inkluzivas la plej freŝajn versiojn de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safaro, kaj la diversaj retumiloj trovitaj en la plimulto de mekanismoj móviles uzataj por aliri retejo hodiaŭ.
Dum progreso certe estis farita al TTT-retumiloj kaj kiel ili montras CSS, ekzistas ankoraŭ nekonsekvencoj inter ĉi tiuj diversaj programaj elektoj. Unu el la komunaj nekonsekvencoj estas kiel tiuj foliumiloj kalkulas marĝenojn, kompletigojn kaj limojn defaŭlte.
Pro ĉi tiuj aspektoj de la skatolo-modelo efektive ĉiuj HTML-elementoj, kaj ĉar ili estas esencaj por krei paĝajn planojn, malkontenta ekrano signifas, ke paĝo eble aspektas bonege en unu retumilo, sed aspektas iomete en alia. Por batali ĉi tiun problemon, multaj retejo-diseñistoj normalecigas ĉi tiujn aspektojn de la skatolo-modelo. Ĉi tiu praktiko ankaŭ estas konata kiel "nuligi" la valorojn por randoj, kompletigoj kaj limoj.
Noto pri la legilo defaŭlta
Retumiloj ĉiuj havas defaŭltajn agordojn por iuj montriĝaj aspektoj de paĝo. Ekzemple, hiperligoj estas blua kaj submetitaj defaŭlte. Ĉi tio estas konsekvenca inter diversaj retumiloj, kaj kvankam ĝi estas io, kiun la plimulto de la diseñadores ŝanĝiĝas laŭ la dezajno de siaj specifa projekto, la fakto, ke ili ĉiuj komencas kun la samaj korektoj, faciligas fari ĉi tiujn ŝanĝojn. Bedaŭrinde, la defaŭlta valoro por randoj, kompletigoj kaj limoj ne ĝuas de la sama nivelo de transversa retumilo.
Normiganta Valorojn por Margins kaj Plenigado
La plej bona maniero por solvi la problemon de nekonsistenta skatolo-modelo estas agordi ĉiujn randojn kaj kompletigajn valorojn de HTML-elementoj al nulo. Estas kelkaj manieroj, kiujn vi povus fari ĉi por aldoni ĉi tiun CSS-regulon al via stilfolio:
* {rando: 0; Plenigado: 0; }Ĉi tiu CSS-regulo uzas la * aŭ bildokartan karakteron. Tiu karaktero signifas "ĉiuj elementoj" kaj ĝi esence elektus ĉiun HTML-elementon kaj starigos la randojn kaj kompletigojn al 0. Kvankam ĉi tiu regulo estas tre nespecifa, ĉar ĝi estas en via ekstera stilfolio, ĝi havos pli altan specifecon ol la defaŭlta retumilo valoroj fari Pro tio, ke tiuj prifaŭltoj estas tio, kion vi transskribas, ĉi tiu stilo plenumos tion, kion vi intencas fari.
Alia eblo estas apliki ĉi tiujn valorojn al la elementoj de HTML kaj korpo. Ĉar ĉiuj aliaj elementoj de via paĝo estos infanoj de ĉi tiuj du elementoj, la CSS-akvofalo devus apliki ĉi tiujn valorojn al ĉiuj tiuj aliaj elementoj.
html, korpo {rando: 0; Plenigado: 0; }Ĉi tio komencos vian dezajnon en la sama loko de ĉiuj retumiloj, sed unu afero rememori estas, ke vi iam turnos ĉiujn randojn kaj kompletiĝos, vi devos turni ilin rekte por specifaj partoj de via retpaĝo por atingi la aspekton. kaj sentu, ke via dezajno petas.
Limoj
Vi eble pensas "sed neniu retumilo havas limon ĉirkaŭ la korpo elemento defaŭlte". Ĉi tio ne estas strikte vera. Pli malnovaj versioj de Internet Explorer havas travidebla aŭ nevidebla limo ĉirkaŭ elementoj. Krom se vi starigos la limon al 0, tiu limo povas malŝpari vian paĝon-aranĝojn. Se vi decidis, ke vi daŭre subtenos ĉi tiujn antikvajn versiojn de IE, vi devos trakti ĉi tion aldonante la jenajn al via korpo kaj HTML-stiloj:
HTML, korpo {
rando: 0px;
kompletigo: 0px;
limo: 0px;
}
Simila al kiel vi malŝaltas la randojn kaj rellenojn, ĉi tiu nova stilo ankaŭ malŝaltos defaŭltajn limojn. Vi ankaŭ povus fari la saman aferon per uzado de la kartoprezisto montrita pli frue en la artikolo.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 9/27/16.