שלב 1

נתח את הגדרת השוליים עבור כל Div בעייתי. ודא כי Divs בכל צד של השטח ריק אין הגדרת שולי כי הוא יוצר את החלל הריק. השוליים של כל Div נמצאים בשטח שמחוץ לה. אם שלך יש שולי, אז את צבע הרקע או התמונה של האב Div יכול להיות מוצג על פני השוליים ויכול ליצור את אפקט החלל הלבן. ההחלטה היא פשוטה כמו הגדרת השוליים של Divs עם בעיות באפס.

שלב 2

מגדיר את הגדרות השוליים והריווח באופן שווה עבור כל רכיבי החסימה. הדפדפנים השונים מחילים אפשרויות שונות של שולי רווח ורווח קבוע מראש בכל רכיבי החסימה. השוליים של אחד מרכיבי החסימה הללו עשויים להיות אחראים להשפעה של מרחב לבן לא רצוי בדפדפן, תוך השפעה שונה בדפדפן אחר. על ידי סטנדרטיזציה של המאפיינים של המרווח ואת השוליים בדפדפנים אתה יכול בבטחה לחסל את זה.

קבוצה של כללי CSS לביצוע התקינה של תצורת רכיב הבלוק יכולה להופיע כדלקמן:

html, body {margin: 0; ריפוד: 0;} p {margin 0 0 3px 0; padding: 0;} h1, h2, h3, h4, h5, h6 {margin 0 0 2px 0; padding: 0;} טופס {margin 0; ריפוד: 0;}

שלב 3

הצב את התוכן ב- Div. ייתכן שדפדפנים מסוימים לא יציגו קובץ Div שאינו מכיל תוכן, גם אם יש לו תמונת רקע. אם התוכן שלך אינו מכיל תוכן, הדפדפן יכול להקטין אותו על ידי השארת שטח ריק קטן. כדי לפתור בעיה זו, שקול להכניס קובץ GIF שקוף ל- Div. פעולה זו תיתן לך תוכן, שיוכר על ידי הדפדפן מבלי לשנות את הרושם החזותי שברצונך ליצור.

שלב 4

קן את Divs בתוך אלמנט div האב. הקצאת האב Div או גלישת כי שומר על שתי Divs כי לגרום לבעיה. שים צבע רקע אלמנט האב כדי לקבל צבע רצוי יותר או תמונה אשר יכסה את החלל הלבן ולהתאים את העיצוב של האתר.

שלב 5

בדוק את מאפייני היישור. Divs שיש להם את תצורת היישור "inline" (inline) עשויים נוטים להוסיף פיקסלים בחלק העליון והתחתון של Div כדי ליצור שינויי טקסט מאז הפרמטר "inline" יישור משמש לעתים קרובות עבור יישור טקסט. במקום לנסות למזג את שתי Divs באמצעות "inline" אסטרטגיה היישור, פשוט מחדש להקצות את היישור "בלוק" ומקום Divs באמצעות "לצוף" מיקום המיקום. הנה דוגמה:

וי זכויות

התצוגה: Block;}

12

צף: שמאל;}

בית הצ

צף: שמאל;}