Supprimer "espaces" entre les éléments div
C'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 la <html>
balise, la page ressemble à ceci:
Mais si je supprime le <!DOCTYPE html>
balise, les "espaces blancs" entre les deux lignes seront supprimer
Mais je voudrais utiliser <!DOCTYPE html>
tag, il est conseillé, mais je ne trouve pas de règle CSS qui permet de supprimer que l'espace blanc, j'ai utilisé margin:0;outline:none; etc... mais il ne fonctionne pas , quelqu'un m'aider. Merci!( Je ne suis pas très bonne en anglais ...)
source d'informationauteur phibao37
Vous devez vous connecter pour publier un commentaire.
La façon la plus propre de régler ce problème est d'appliquer la
vertical-align: top
bien à vous les règles CSS:Si vous ajoutez du contenu à votre
div
's, puis en utilisant soitline-height: 0
oufont-size: 0
causerait des problèmes avec votre mise en forme de texte.Voir violon: http://jsfiddle.net/audetwebdesign/eJqaZ/
Où Ce Problème Vient De
Ce problème peut survenir lorsqu'un navigateur est dans les "bizarreries" de mode. Dans cet exemple, la modification de la
doctype à partir de:
à
va changer la façon dont le navigateur traite avec les espaces superflus.
En mode quirks, l'espace est ignoré, mais conservé dans le mode strict.
Références:
doctype html ajoute des espaces?
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Ajouter
line-height: 0px;
à votre div parentjsfiddle: http://jsfiddle.net/majZt/
utilisation
line-height: 0px;
TRAVAIL DE DÉMONSTRATION
Le Code CSS:
Cela va affecter de façon générale à tout votre Div. Si vous voulez que votre existant div parent seul à avoir pas d'espace, vous pouvez appliquer le même.
Vous avez besoin de ce
Que, amusez-vous bien enlever tous ces espaces vides problèmes.
Bien que probablement pas la meilleure méthode, vous pourriez ajouter:
Vous pouvez utiliser la hauteur de la ligne sur div1 comme ci-dessous:
Voir ceci: http://jsfiddle.net/wCpU8/
HTML
CSS
DÉMO
À l'aide d'un
<br/>
pour faire une suite c'est une mauvaise solution dès le début.Faire de votre conteneur #div1 avoir une largeur égale à 3 enfants divs.
<br/>
à mon avis ne doit pas être utilisé à d'autres endroits que les paragraphes.