Voici le problème. Si je mets dans un conteneur div simple quelques items et display: inline ou inline-block dans la règle des items j’obtiens une marge entre les items Si je mets en commentaire ce display et j’active au contraire un display: flex ou inline-flex dans la règle du conteneur cette marge intruse disparait. D’où vient cette marge qui n’est définie nulle part ? Merci Voici ce code très simple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemples</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color:white;
}
body {
width: 20%;
height: 250px;
margin: 50px auto 0;
padding-top:20px;
border: 2px solid black;
background-color: white;
font-weight: 400;
}
#conteneur{
/*display:flex;*/
/*display:inline-flex;*/
width: 90%;
height:150px;
margin: auto;
border:2px solid black;
background-color: #dddddd;
}
.item {
display:inline-block;
padding: 0 5px 0 5px;
border: 2px solid black;
background-color: white;
font-size: 25px;
font-weight: 750;
}
</style>
</head>
<body>
<br><br>
<div id="conteneur">
<div class="item">Un</div>
<div class="item">Deux</div>
<div class="item">Trois</div>
<div class="item">Quatre</div>
</div>
</body>
</html>
+0
-0
