Espace blanc entre plusieurs divs
TheFlameflo Le 26 mars 2017 à 16:19 (Édité le 25 janvier 2019 à 17:53)
J'ai un petit problème avec plusieurs divs.
Même si je mets 4 divs qui prennent 25% de l'écran, il y a un espace blanc entre chacune d'elles.
Je sais qu'on peut régler ce problème facilement en collant toutes les divs dans le code, mais ce n'est pas esthétique, ni utile :
<div class="col-mb-3"></div><div class="col-mb-3"></div><div class="col-mb-3"></div><div class="col-mb-3"></div>
Voici mon code actuel (ne vous préoccupez pas du fait qu'il n'y a pas les balises de base comme body, head, etc. Ce bout de code est inclus dans mon "template".)
<div class="col-mb-3"></div>
<div class="col-mb-3"></div>
<div class="col-mb-3"></div>
<div class="col-mb-3"></div>
*
{
box-sizing: border-box;
font-size: 0;
white-space: nowrap;
}
body
{
margin: 0;
}
div[class*="col-"]
{
background-clip: content-box;
background-color: grey;
display: inline-block;
height: 300px;
}
.col-mb-3{width: 25%;}
Merci d'avance pour vos réponses, si vous avez besoin de précision, n'hésitez pas ! 😀
TheOldNoob Le 26 mars 2017 à 17:42
Pour ton recette, tu peu aussi faire un pading: 0; après ton margin dans ta balise body.
Sinon, si le problème persiste, il y a une astuce a se problème 😀
<div class="col-mb-3"></div><!--
--><div class="col-mb-3"></div><!--
--><div class="col-mb-3"></div><!--
-->div class="col-mb-3"></div>
TheFlameflo Le 26 mars 2017 à 18:26 (Édité le 26 mars 2017 à 18:32)
J'ai rajouté le "padding : 0", mais ça na pas fonctionné.
Le deuxième technique fonctionne, mais je suis toujours preneur si quelqu'un trouve une meilleure alternative. 😉
EDIT :
Je pense avoir trouvé la meilleure solution (pour le moment).
Il suffit de mettre "font-size: 0" à l'élément parent.
Source : http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements
