Comment mettre divs dans une rangée avec "display: inline-block", sans marge?

Chaque fois que je place des divs dans une rangée horizontale en utilisant display:inline-block, il y a toujours une marge entre eux, même si je règle margin: 0 !important. Est-il possible d'avoir exactement 0 pixels entre les divs?Comment mettre divs dans une rangée avec "display: inline-block", sans marge?

Voici un exemple de base où j'ai trois boîtes noires qui devraient être continue, mais il y a un espace blanc entre eux: (Fiddle)

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
}

<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

Source

2017-08-03 Joe Morano

Avez-vous essayé/vérifié flexbox? –

https: // stackoverflow.com/questions/5078239/comment-supprimer-l'entre-espace-entre-inline-block-elements –

Il existe différentes façons de résoudre ce problème, consultez ce lien, qui devrait aider: https://css-tricks.com/ combat-l'-espace-entre-inline-block-elements/ –

Il est à cause de la nouvelle ligne entre les éléments. Vous pourriez faire des commentaires comme je l'ai fait, ou faire ces éléments en ligne les uns aux autres

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
}

<div class="div"></div><!-- 
 
--><div class="div"></div><!-- 
 
--><div class="div"></div>

Source

2017-08-03 10:05:37 Swellar

Woooooooow. Je n'aurais jamais pensé ça. C'est fou. Merci! –

Vous devez donner le font-size: 0 au parent récipient. La taille de la police donne ces petites marges aux blocs en ligne.

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
} 
 
.container { 
 
    font-size: 0; 
 
}

<div class="container"> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
</div>

Source

2017-08-03 10:04:17

Etes-vous sûr? Je l'ai essayé: https://jsfiddle.net/ketrb1ac/2/ –

Oui: https://jsfiddle.net/xooL3drg/ –

@Swellar, merci, fait :) –

.divlist { 
 
    position: relative; 
 
    font-size: 0; 
 
} 
 
.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    font-size: 16px; 
 
}

<div class="divlist"> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
</div>

Source

2017-08-03 10:05:16

-2

J'ai ajouté une enveloppe définie comme FlexBox.

.wrapper { 
 
    display: inline-flex; 
 
} 
 

 
.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
</div>

Source

2017-08-03 10:05:43 Gerard

Les éléments Flex sont bloqués, ils n'ont donc plus la valeur d'affichage 'inline-block' – Alohci

Bon point. Je l'ai changé en inline-flex – Gerard

Notez que faire le wrapper inline-flex n'aide pas. Les éléments Inline-flex sont toujours des conteneurs flex, les enfants des conteneurs flex sont des éléments flex, et les éléments flex sont bloqués. – Alohci

Il vaut mieux avoir la taille extérieure de style div et ajouter 0

Par exemple:

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
    font-size: 14px; 
 
    color:#fff; 
 
    text-align:center; 
 
} 
 
.main-div { 
 
    font-size:0; 
 
}

<div class="main-div"> 
 
<div class="div">1</div> 
 
<div class="div">2</div> 
 
<div class="div">3</div> 
 
</div>

Source

2017-08-03 10:06:35 Punith

-1

Comme l'a dit Gleb, mettre le font-size:0; sur le conteneur. Vous pouvez également placer le conteneur dans display: inline-flex; ou display: flex;.

Source

2017-08-03 10:07:58 Chaaampy

Utilisez display: table-cell;

.div { 
 
    position: relative; 
 
    display: table-cell; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

Source

2017-08-03 10:08:45 Vishnu

Je sais que ce n'est pas la solution la plus propre, mais voici comment je le fais:

.div { 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    margin-right : -0.25em; 
 
}

<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

La marge indésirable inline-block est bien connue et vous trouverez d'autres solutions here

Source

2017-08-03 10:17:33 Crssss

Comment mettre divs dans une rangée avec "display: inline-block", sans marge?

Répondre

Questions connexes