web-dev-qa-db-fra.com

Supprimer les "espaces blancs" entre l'élément div

Ceci est mon code HTML

<div id="div1">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

Mon CSS:

#div1 {
    width:150px;height:100px;white-space:nowrap;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

Si j'insère le <!DOCTYPE html> avant le <html> tag, la page ressemblera à ceci:

enter image description here

Mais si je supprime le <!DOCTYPE html> tag, les "espaces" entre les deux lignes seront supprimés enter image description here

Mais j'aimerais utiliser <!DOCTYPE html> tag, c'est recommandé, mais je ne trouve aucune règle CSS qui puisse supprimer cet espace, j'ai utilisé margin: 0; outline: none; etc ... mais ça ne marche pas, quelqu'un m'aide. Merci! (Je ne suis pas bon en anglais ...)

csshtmlwhitespacemargin
18
phibao37

La façon la plus simple de résoudre ce problème consiste à appliquer le vertical-align: top propriété pour vous règles CSS:

#div1 div {
   width:30px;height:30px;
   border:blue 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
}

Si vous deviez ajouter du contenu à vos div, utilisez alors line-height: 0 ou font-size: 0 causerait des problèmes avec la disposition de votre texte.

Voir violon: http://jsfiddle.net/audetwebdesign/eJqaZ/

D'où vient ce problème

Ce problème peut survenir lorsqu'un navigateur est en mode "bizarreries". Dans cet exemple, changer le doctype de:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

à

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

changera la façon dont le navigateur traite les espaces supplémentaires.

En mode excentrique, l'espace est ignoré, mais conservé en mode strict.

Références:

html doctype ajoute des espaces?

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

32
Marc Audet

Ajouter line-height: 0px; à votre parent div

jsfiddle: http://jsfiddle.net/majZt/

11
Simon Staton

Tu en as besoin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<-- I absolutely don't know why, but go ahead, and add this code snippet to your CSS -->

*{
    margin:0;
    padding:0;
}

Voilà, amusez-vous à éliminer tous ces problèmes d'espaces blancs.

5
Tauren Mohammed Uddin

utilisation line-height: 0px;

DEMO DE TRAVAIL

Le code CSS: 

div{line-height:0;}

Cela affectera génériquement tous vos Divs. Si vous voulez que votre div parent actuel n'ait aucun espacement, vous pouvez lui appliquer la même chose.

4
Nitesh

Bien que ce ne soit probablement pas la meilleure méthode que vous pourriez ajouter:

#div1 {
    ...
    font-size:0;
}
2
Adam Robinson

Vous pouvez utiliser la hauteur de ligne sur div1 comme ci-dessous:

<div id="div1" style="line-height:0px;">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

Voir ceci: http://jsfiddle.net/wCpU8/

1
Ankit Zalani

[~ # ~] html [~ # ~] 

<div id="div1">
        <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

[~ # ~] css [~ # ~] 

#div1 {
    width:150px;height:100px;white-space:nowrap;
    line-height: 0px;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

DÉMO

0
Leo T Abraham

Utilisant un <br/> pour créer une nouvelle ligne, c'est une mauvaise solution dès le départ. Faites de votre conteneur # div1 une largeur égale à 3 divisions enfant. <br/> à mon avis ne devrait pas être utilisé ailleurs que dans les paragraphes.

0
Dan Ovidiu Boncut