Les partenaires publicitaires:

Comment se débarrasser de l'espace blanc entre divs

Concepteurs de sites Web utilisent les règles de Cascading Style Sheet à concevoir des pages Web. Ces règles permettent au concepteur de créer et de manipuler des blocs de contenu qui sont connus comme divs. Un problème, parfois appelé le bogue de l'espace blanc - est créé lorsque le concepteur tente de placer deux de ces divs side-by-side - seulement pour rencontrer la conséquence en friche d'une petite bande d'espace blanc indésirable existant entre les deux divs. Heureusement, le concepteur peut employer des règles CSS qui éliminent ou cachent cet espace blanc.

Instructions

  1. Analyser les paramètres de marge pour chacune des divs problématiques. Assurer les divs de chaque côté de l'espace blanc ne disposent pas des paramètres de marge qui créent l'espace blanc. La marge de chaque div est placé sur la zone à l'extérieur de la div. Si votre div a une marge, puis la couleur d'arrière-plan ou l'image de la div parent peut montrer à travers la marge et pourrait créer un effet d'espace blanc. Votre solution peut être aussi simple que le réglage de la marge des divs de problèmes à zéro.

  2. Définir les paramètres de marge et padding uniformes pour tous les éléments de bloc. Différents navigateurs appliquent différentes margin et padding options par défaut à tous les éléments de bloc. La marge sur un de ces élément de bloc peut être responsable de votre espace blanc effet involontaire dans un navigateur, tout en ayant un effet différent dans un autre navigateur. En standardisant les propriétés margin et padding dans tous les navigateurs, vous pouvez éliminer cette incertitude.

    Un ensemble de règles CSS pour accomplir la normalisation des paramètres de blocs élémentaires pourrait apparaître comme suit.




    html, body {margin: 0- padding: 0-}
    p {margin 0 0 3px 0- padding: 0-}
    H1, H2, H3, H4, H5, H6 {margin 0 0 2px 0- padding: 0-}
    forme {margin 0- padding: 0-}

  3. Placez le contenu dans votre div. Certains navigateurs ne peuvent pas afficher un div qui ne contient pas le contenu, même si cela div a une image de fond. Si votre div n'a pas contenu, le navigateur peut effondrement qui div rendu une petite quantité d'espace blanc. Pour résoudre ce problème, envisager d'insérer un fichier GIF transparent dans la div. Cela donnera à votre contenu div qui est reconnu par le navigateur, tout en ne modifiant pas l'impression visuelle que vous souhaitez créer.

  4. Nest les divs dans un élément parent div. Attribuer un parent ou un wrapper div avec la garde au cours des deux divs causer de problèmes. Régler la couleur de l'élément parent de fond à une couleur ou une image plus souhaitable qui couvrira l'espace blanc et correspondre à la conception du site.



  5. Vérifiez les paramètres d'alignement. Divs ayant un réglage d'alignement de "inline" peuvent avoir tendance à ajouter des pixels en haut et en bas de la div pour tenir compte des variations de texte depuis le "inline" réglage d'alignement est souvent utilisé pour l'alignement du texte. Au lieu d'essayer de remonter deux divs ensemble en utilisant une stratégie d'alignement "en ligne", tout simplement ré-affecter l'alignement de «bloquer» et positionner les divs utilisant le "float" propriété de positionnement. Voici un exemple.

    parentDiv {

    affichage: d'îlot}

    childDiv1 {

    float: left;}

    childDiv2 {

    float: left;}

» » » » Comment se débarrasser de l'espace blanc entre divs