ניצן קסס צו זעראָ אָוט דיין מאַרגינס און געמארקן

הייַנט ס וועב בלעטערער האט קומען אַ לאַנג וועג פון די משוגע טעג, ווו קיין קרייַז-בלעטערער קאָנסיסטענסי איז געווען ווישפול טראכטן. הייַנט ס וועב בראַוזערז זענען אַלע זייער סטאַנדאַרדס. זיי שפּילן נייסלי צוזאַמען און באַפרייַען אַ פערלי קאָנסיסטענט בלאַט ווייַז איבער די פאַרשידן בראַוזערז. דאס כולל די לעצט ווערסיעס פון Google קראָום, מייקראָסאָפֿט עדזש, מאָזיללאַ פירעפאָקס, אָפּעראַ, סאַפאַרי, און די פאַרשידן בראַוזערז געפונען אויף די מיריאַד פון רירעוודיק דעוויסעס געניצט צו צוטריט וועבזייַטל הייַנט.

בשעת די פּראָגרעס זענען זיכער געמאכט ווען עס קומט צו וועב בראַוזערז און ווי זיי אַרויסווייַזן CSS, עס זענען נאָך ינגקאַנסיסטענסיז צווישן די פאַרשידן ווייכווארג אָפּציעס. איינער פון די פּראָסט ינגקאַנסיסטענסיז איז ווי די בראַוזערז רעכענען מאַרדזשאַנז, וואַטן, און געמארקן דורך פעליקייַט.

ווייַל פון די אַספּעקץ פון די קעסטל מאָדעל ווירקונג אַלע HTML עלעמענטן, און ווייַל זיי זענען יקערדיק אין שאפן בלאַט לייאַוץ, אַ ומבאַקוועם אַרויסווייַזן מיטל אַז אַ בלאַט קען קוקן גרויס אין איין בלעטערער, ​​אָבער קוק אַ ביסל אַוועק אין אנדערן. צו קעמפן דעם פּראָבלעם, פילע וועב דיזיינערז נאָרמאַלייז די אַספּעקץ פון די קעסטל מאָדעל. דעם פיר איז אויך באקאנט ווי "זעראָינג אויס" די וואַלועס פֿאַר מאַרדזשאַנז, וואַטן, און געמארקן.

א באַמערקונג אויף בראַוזער דעפאַולץ

וועב בראַוזערז אַלע האָבן פעליקייַט סעטטינגס פֿאַר זיכער ווייַז אַספּעקץ פון אַ בלאַט. פֿאַר בייַשפּיל, כייפּערלינגקס זענען בלוי און אַנדערליינד דורך פעליקייַט. דאָס איז קאָנסיסטענט ביי פאַרשידן בראַוזערז, און כאָטש עס איז עפּעס אַז רובֿ דיזיינערז טוישן צו די פּלאַן באדערפענישן פון זייער ספּעציפיש פּרויעקט, די פאַקט אַז זיי זענען אַלע סטאַרטינג מיט די זעלבע דיפאָלץ מאכט עס גרינגער צו מאַכן די ענדערונגען. סאַדלי, די פעליקייַט ווערט פֿאַר מאַרדזשאַנז, וואַטן, און געמארקן טאָן נישט געניסן די זעלבע מדרגה פון קרייַז-בלעטערער קאָנסיסטענסי.

נאָרמאַליזינג וואַלועס פֿאַר מאַרגינס און פּאַדינג

דער בעסטער וועג צו סאָלווע די פּראָבלעם פון סתירה קעסטל מאָדעל איז צו שטעלן אַלע די מאַרדזשאַנז און וואַטן וואַלועס פון HTML עלעמענטן צו נול. עס זענען אַ ביסל וועגן וואָס איר קענען טאָן דעם איז צו לייגן דעם קסס הערשן צו דיין סטילעשעעט:

* {גראַדעס: 0; וואַטן: 0; }

דעם קסס הערשן ניצט דעם * אָדער ווילדקאַרד כאַראַקטער. דעם כאַראַקטער מיטל "אַלע עלעמענטן" און עס וואָלט בייסיקלי אויסקלייַבן יעדער HTML עלעמענט און שטעלן די מאַרדזשאַנז און וואַטן צו 0. כאָטש דעם הערשן איז זייער ונספּעסיפיק, ווייַל עס איז אין דיין פונדרויסנדיק סטיילז, עס וועט האָבן אַ העכער ספּעסאַפיסאַטי ווי די פעליקייַט בלעטערער וואַלועס טאָן. זינט די דיפאָלץ זענען וואָס איר זענט אָווועררייטינג, דעם איין נוסח וועט אַקטשאַוואַלי וואָס איר פאָרשטעלן זיך צו טאָן.

אן אנדער אָפּציע איז צו צולייגן די וואַלועס צו HTML און גוף עלעמענטן. ווייַל אַלע די אנדערע יסודות אויף דיין בלאַט זענען קינדער פון די צוויי עלעמענטן, די קסס קאַסקאַדע זאָל אַפּלייז די וואַלועס צו אַלע די אנדערע עלעמענטן.

html, body {margin: 0; וואַטן: 0; }

דאס וועט אָנהייבן דיין פּלאַן אין די זעלבע פּלאַץ אויף אַלע בראַוזערז, אָבער איין זאַך צו געדענקען איז אַז ווען איר אומקערן אַלע מאַרדזשאַנז און וואַטן אַוועק, איר וועט דאַרפֿן צו סאַלעקטיוולי קער זיי צוריק אויף פֿאַר ספּעציפיש טיילן פון דיין וועב בלאַט צו דערגרייכן די קוק און פילן אַז דיין פּלאַן רופט פֿאַר.

Borders

איר קען זיין טראכטן "אָבער קיין בראַוזערז האָבן אַ גרענעץ אַרום דעם גוף עלעמענט דורך פעליקייַט". דאָס איז ניט שטרענג אמת. עלטערע ווערסיעס פון Internet Explorer האָבן אַ טראַנספּעראַנט אָדער ומזעיק גרענעץ אַרום עלעמענטן. אויב איר שטעלן די גרענעץ צו 0, דעם גרענעץ קענען מאַסע אַרויף דיין בלאַט לייאַוץ. אויב איר האָבן באַשלאָסן אַז איר וועט פאָרזעצן צו שטיצן די אַנטיקווייטיד ווערסיעס פון הייסט, איר דאַרפֿן צו אַדרעס דעם אַדדינג די פאלגענדע צו דיין גוף און HTML סטיילז:

HTML, body {
גרענעץ: 0 פּקס;
padding: 0px;
border: 0px;
}

ענלעך צו ווי איר פארקערט אַוועק די מאַרדזשאַנז און וואַטן, דעם נייַ סטיל וועט אויך קער אַוועק פעלדער געמארקן. איר קען אויך טאָן די זעלבע זאַך דורך ניצן די ווילדקאַרד סעלעקטאָר געוויזן פריער אין דעם אַרטיקל.

אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 9/27/16.