Pourquoi y a-t-il un écart inexplicable entre ces éléments div en ligne-bloc?
j'ai deux éléments en ligne-bloc div , qui sont les mêmes, placés l'un à côté de l'autre. Cependant, il semble y avoir un espace mystérieux de 4 pixels entre les deux divs malgré le fait que la marge soit fixée à 0. Il n'y a pas de divs parent les affectant - que se passe-t-il?
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
C'est à ça que je veux qu'il ressemble:
6 réponses
dans ce cas, vos éléments div ont été changés des éléments de niveau block aux éléments inline . Une caractéristique typique des éléments inline est qu'ils respectent l'espace dans le markup. Ceci explique pourquoi un gap de l'espace est généré entre les éléments. (exemple)
Il y a quelques solutions qui peuvent être utilisées pour résoudre ce problème.
Méthode 1-Supprimer les espaces blancs du balisage
Exemple 1 - Commentaire de l'espace: (exemple)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
exemple 2 - supprimer les sauts de ligne: (exemple)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
exemple 3 - Fermer une partie de l'étiquette sur la ligne suivante (exemple)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
exemple 4 - fermez l'étiquette entière sur la ligne suivante: (exemple)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
Méthode 2-Réinitialiser le font-size
puisque l'espace entre les éléments inline est déterminé par le font-size , vous pouvez simplement réinitialiser le font-size en 0 , et ainsi supprimer l'espace entre les éléments.
Juste mis font-size: 0 sur le parent des éléments, et ensuite déclarer une nouvelle font-size pour les enfants des éléments. Cela fonctionne, comme démontré ici (exemple)
#parent {
font-size: 0;
}
#child {
font-size: 16px;
}
cette méthode fonctionne assez bien, car il ne nécessite pas un changement dans le markup; cependant, il ne fonctionne pas si l'élément enfant font-size est déclaré en utilisant les unités em . Je recommande donc de supprimer l'espace blanc du balisage, ou bien flottant les éléments et d'éviter ainsi l'espace généré par les éléments inline .
Méthode 3-Régler l'élément parent à display: flex
Dans certains cas, vous pouvez également définir la display de l'élément parent à flex . (exemple)
cela supprime efficacement les espaces entre les éléments dans navigateurs pris en charge . N'oubliez pas d'ajouter fournisseur approprié préfixes pour un soutien supplémentaire.
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}<div class="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>notes latérales:
Il est incroyablement peu fiable utiliser des marges négatives pour supprimer l'espace entre inline éléments. N'utilisez pas de marges négatives s'il existe d'autres solutions plus optimales.
L'utilisation de inline-block permet un espace blanc dans votre HTML, ce qui équivaut généralement à .25em (ou 4px).
vous pouvez soit commenter l'espace blanc ou, une solution plus commune, est de mettre le parent font-size à 0 et de le réinitialiser à la taille requise sur les éléments en ligne-bloc.
inline-block définit automatiquement une valeur par défaut white-space comme tout le monde le dit. (Ceci est dû aux propriétés "inline" des éléments, de même que l'espacement entre les mots dans une chaîne de texte dans votre HTML markup. C'est pourquoi supprimer white-space dans le markup fonctionne aussi.) La solution la plus simple est de simplement float le conteneur. (eg. float: left; ) sur une autre note, chaque id doit être unique, ce qui signifie que vous ne pouvez pas utiliser le même id deux fois dans le même HTML document. Vous devriez utiliser des classes à la place, où vous pouvez utiliser le même class pour plusieurs éléments.
.container {
display: inline-block;
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
a trouvé une solution n'impliquant pas Flex, parce que Flex ne fonctionne pas dans les navigateurs plus anciens. Exemple:
.container {
display:block;
position:relative;
height:150px;
width:1024px;
margin:0 auto;
padding:0px;
border:0px;
background:#ececec;
margin-bottom:10px;
text-align:justify;
box-sizing:border-box;
white-space:nowrap;
font-size:0pt;
letter-spacing:-1em;
}
.cols {
display:inline-block;
position:relative;
width:32%;
height:100%;
margin:0 auto;
margin-right:2%;
border:0px;
background:lightgreen;
box-sizing:border-box;
padding:10px;
font-size:10pt;
letter-spacing:normal;
}
.cols:last-child {
margin-right:0;
}
il suffit d'ajouter une bordure: 2px solid #e60000 ; à votre deuxième étiquette div CSS.
Certainement, il fonctionne
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
vous devez ajouter
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
margin-right:-4px;
}
parce que chaque fois que vous écrivez display:inline-block il faut un margin-right:4px supplémentaire . Donc, vous avez besoin de l'enlever.