parentDiv {

L'erreur d'espace blanc peut être un gros problème pour les concepteurs Web.

Étape 1

Analyser le paramètre de marge pour chaque div. Problématique. Assurez-vous que les divs de chaque côté de l'espace vide n'ont pas de paramètre de marge créant l'espace vide. La marge de chaque div est dans la zone en dehors de celle-ci. Si le vôtre a une marge, la couleur d'arrière-plan ou l'image de la division parente peut être affichée sur la marge et créer un effet d'espace blanc. La résolution est aussi simple que de régler la marge des Divs avec des problèmes à zéro.

Étape 2

Définit les paramètres de marge et d'espacement de manière uniforme pour tous les éléments de bloc. Les différents navigateurs appliquent différentes options de marge et d'espacement prédéterminé dans tous les éléments de bloc. La marge de l'un de ces éléments de bloc peut être responsable de l'effet des espaces non désirés dans un navigateur, tout en ayant un effet différent dans un autre navigateur. En normalisant les propriétés d'espacement et de marge dans les navigateurs, vous pouvez éliminer ce problème en toute sécurité.

Un ensemble de règles CSS permettant de normaliser la configuration des éléments de bloc peut apparaître comme suit:

html, body {margin: 0; remplissage: 0;} p {marge 0 0 3px 0; remplissage: 0;} h1, h2, h3, h4, h5, h6 {marge 0 0 2px 0; padding: 0;} form {margin 0; Rembourrage: 0;}

Étape 3

Placez le contenu dans votre div. Certains navigateurs peuvent ne pas afficher une div qui n'a pas de contenu, même si elle a une image d'arrière-plan. Si le vôtre n’a pas de contenu, le navigateur peut le réduire en laissant un petit espace vide. Pour résoudre ce problème, envisagez d'insérer un fichier GIF transparent dans la division, ce qui vous donnera un contenu qui sera reconnu par le navigateur sans modifier l'impression visuelle que vous souhaitez créer.

Étape 4

Emboîtez les divs dans l’élément parent div. Attribuez une division parent ou un emballage qui conserve les deux divisions à l'origine du problème. Attribuez une couleur d'arrière-plan à l'élément parent pour obtenir une couleur ou une image plus souhaitable, qui couvrira l'espace blanc et s'adaptera à la conception du site.

Étape 5

Vérifiez les propriétés d'alignement. Les divisions ayant la configuration d'alignement "en ligne" (en ligne) peuvent avoir tendance à ajouter des pixels en haut et en bas de la division pour créer des modifications de texte car le paramètre d'alignement "en ligne" est souvent utilisé pour l'alignement du texte. Au lieu d'essayer de fusionner les deux divs à l'aide de la stratégie d'alignement "en ligne", réaffectez simplement l'alignement dans "Bloc" et placez les divs à l'aide de la propriété de placement "float". Voici un exemple:

parentDiv {

affichage: bloc;}

childDiv1 {

float: left;}

childDiv2 {

float: left;}