Krok 1

Analyzujte nastavení okrajů pro každou problematickou oblast Div. Ujistěte se, že disky Divs na každé straně prázdného místa nemají nastavení okrajů, které vytvářejí prázdné místo. Okraj každé Div je v oblasti mimo ni. Pokud vaše má marže, barva pozadí nebo obrázek nadřazeného Div se může zobrazit přes okraj a může vytvořit efekt bílého místa. Rozlišení je stejně jednoduché jako nastavení okraje Divů s problémy na nulu.

Krok 2

Definuje nastavení okrajů a rozestupů rovnoměrně pro všechny prvky bloku. Různé prohlížeče používají různé varianty okrajů a předem stanovených vzdáleností ve všech prvcích bloku. Okraj jednoho z těchto blokových prvků může být odpovědný za účinek nežádoucího bílého prostoru v prohlížeči, zatímco má jiný účinek v jiném prohlížeči. Normalizací vlastností mezery a okrajů v prohlížečích můžete tento problém bezpečně odstranit.

Sada pravidel CSS pro standardizaci konfigurace prvků bloku se může zobrazit takto:

html, tělo {margin: 0; polstrování: 0;} p {margin 0 0 3px 0; výplň: 0;} h1, h2, h3, h4, h5, h6 {margin 0 0 2px 0; polstrování: 0;} form {margin 0; polstrování: 0;}

Krok 3

Umístěte obsah do Div. Některé prohlížeče nemusí zobrazovat Div, který nemá obsah, i když má obrázek na pozadí. Pokud váš obsah nemá obsah, může jej prohlížeč snížit tím, že ponechá malý prázdný prostor. Chcete-li tento problém vyřešit, zvážte vložení průhledného souboru GIF do formátu Div, který vám poskytne obsah, který prohlížeč rozpozná bez úpravy vizuálního zobrazení, které chcete vytvořit.

Krok 4

Nest Divs v rámci nadřízeného elementu Div. Přiřaďte rodičovi Div nebo obalování, které udržuje dva Divů, které způsobují problém. Vložte barvu pozadí do nadřazeného prvku, abyste získali žádoucí barvu nebo obrázek, který bude pokrývat bílé místo a bude odpovídat návrhu webu.

Krok 5

Zkontrolujte vlastnosti zarovnání. Divs, které mají konfiguraci zarovnání "inline" (inline), mohou mít tendenci přidávat pixely v horní a dolní části Div, aby vytvářely úpravy textu, protože parametr "inline" zarovnání se často používá pro zarovnání textu. Namísto toho, abyste se snažili sloučit dva divy pomocí strategie "inline", jednoduše znovu přiřadte zarovnání do pole "Block" a umístěte Divs pomocí vlastnosti "float". Zde je příklad:

parentDiv {

zobrazení: blok;}

childDiv1 {

float: vlevo;}

childDiv2 {

float: vlevo;}