web-dev-qa-db-fra.com

Pourquoi existe-t-il un écart inexplicable entre ces éléments div inline-block?

J'ai deux éléments div inline-block, identiques, positionnés l'un à côté de l'autre. Cependant, il semble y avoir un mystérieux espace de 4 pixels entre les deux divs malgré le fait que la marge soit définie sur 0. Il n'y a pas de divs parents les effectuant - Qu'est-ce qui se passe?

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

Div problem

Voici ce que je veux qu'il ressemble à:

What it SHOULD look like

htmlcssmarginpadding
256
Legatro

Dans ce cas, vos éléments div ont été changés d’éléments de niveau block à éléments inline. Une caractéristique typique des éléments inline est qu'ils respectent les espaces dans le balisage. Ceci explique pourquoi un gap d'espace est généré entre les éléments. (Exemple)

Quelques solutions peuvent être utilisées pour résoudre ce problème.

Méthode 1 - Supprimer les espaces blancs du balisage

Exemple 1 - Commentez les espaces: (exemple)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Exemple 2 - Supprime les sauts de ligne: (exemple)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Exemple 3 - Ferme une partie de la balise sur la ligne suivante (exemple)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Exemple 4 - Ferme la balise 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

Etant donné que les espaces entre les éléments inline sont déterminés par le font-size, vous pouvez simplement réinitialiser le font-size à 0 et ainsi supprimer l'espace entre les éléments.

Il suffit de définir font-size: 0 sur les éléments parents, puis de déclarer un nouveau font-size pour les éléments enfants. Cela fonctionne, comme démontré ici (exemple)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

Cette méthode fonctionne plutôt bien car elle ne nécessite aucune modification du balisage. Cependant, cela ne fonctionne pas si le font-size de l'élément enfant est déclaré en utilisant des unités em. Je recommanderais donc de supprimer les espaces blancs du balisage, ou alternativement flottant les éléments et d'éviter ainsi l'espace généré par les éléments inline.

Méthode 3 - Définir l'élément parent à display: flex

Dans certains cas, vous pouvez également définir la display de l'élément parent sur flex. (Exemple)

Cela supprime efficacement les espaces entre les éléments de navigateurs pris en charge . N'oubliez pas d'ajouter les préfixes de fournisseur appropriés pour une assistance 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 de côté:

Il est incroyablement peu fiable d’utiliser des marges négatives pour supprimer l’espace entre les éléments inline. N'utilisez pas de marges négatives s'il existe d'autres solutions plus optimales.

520
Josh Crozier

L'utilisation de inline-block permet de laisser un espace dans votre code HTML. Cela équivaut généralement à 0,25em (ou 4 pixels).

Vous pouvez commenter l'espace blanc ou, une solution plus courante, consiste à définir le font-size du parent sur 0 et à le réinitialiser à la taille requise dans les éléments de bloc en-ligne.

34
Paulie_D

inline-block définit automatiquement un white-space par défaut comme tout le monde le dit. (Cela est dû aux propriétés "inline" des éléments, identiques à l'espacement entre les mots d'une chaîne de texte dans votre balise HTML. C'est pourquoi la suppression de white-space dans la balise fonctionne également.) La solution la plus simple consiste simplement à float le conteneur. (par exemple, float: left;) Sur une autre note, chaque id devrait être unique, ce qui signifie que vous ne pouvez pas utiliser le même id deux fois dans le même document HTML. Vous devriez plutôt utiliser des classes, 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;
}
14
bradcush

Nous avons trouvé une solution n'impliquant pas Flex, car Flex ne fonctionne pas dans les anciens navigateurs. 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;
}
1
Larry

ajoutez simplement une bordure: 2px solid #e60000; à votre 2ème balise div CSS.

Ça marche vraiment

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}
0
Podile venkata krishna