Actuellement, il n'y a aucun écart entre le bouton "-" et le champ de quantité. Il apparaît lorsque j'applique display: inline; pour .qib-container div.quantity mais inline a un inconvénient que j'ai découvert et peut-être plus. Je m'attendais à ce que les deux lacunes apparaissent avec inline-block .
Je voudrais savoir pourquoi cela se produit et comment faire apparaître cet écart.
En ce qui concerne l'esthétique , Je ne préfère aucune lacune, mais j'ai déjà une solution de travail pour cela, "avec des lacunes" est juste une option alternative.
https://jsfiddle.net/Lybwro64/
<div class="qib-container"> <button type="button" class="minus qib-button">-</button><div class="quantity"> <label class="screen-reader-text" for="quantity_5d33c50739412">Stainless steel standoff - satin finish quantity</label> <input type="number" id="quantity_5d33c50739412" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric"></div> <button type="button" class="plus qib-button">+</button></div>
.qib-button {
line-height: 1.2;
display: inline-block;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 30px;
color: #000;
background: #e2e2e2;
border-color: #cac9c9;
vertical-align: top;
font-size: 16px;
letter-spacing: 0;
border-style: solid;
border-width: 1px;
transition: none;
border-radius: 2px;
}
.qib-container div.quantity {
float: none;
display: inline-block;
margin: 0;
padding: 0;
border: none;
width: auto;
}
.qib-container .quantity input.qty {
line-height: 1.2;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 45px;
min-height: unset;
min-width: unset;
box-shadow: none;
font-size: 15px;
border-style: solid;
border-color: #cac9c9;
border-width: 1px;
border-radius: 2px;
text-align: center
}
.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
3 Réponses :
L'écart que vous voyez est l'espace blanc réel entre le div de fermeture et le bouton + . dans le HTML . C'est un problème bien connu avec bloc en ligne . La solution de contournement la plus simple, si vous souhaitez conserver l'écart, consiste à supprimer les instances inline-block et à faire du parent un conteneur flex . Cela supprime toutes les lacunes. Ensuite, vous pouvez rajouter manuellement la marge (espace), si nécessaire.
<div class="qib-container">
<button type="button" class="minus qib-button">-</button>
<div class="quantity">
<label class="screen-reader-text" for="quantity_5d33c50739412">Stainless steel standoff - satin finish quantity</label> <input type="number" id="quantity_5d33c50739412" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1"
title="Qty" size="4" inputmode="numeric"></div><button type="button" class="plus qib-button">+</button></div>
.qib-button {
line-height: 1.2;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 30px;
color: #000;
background: #e2e2e2;
border-color: #cac9c9;
vertical-align: top;
font-size: 16px;
letter-spacing: 0;
border-style: solid;
border-width: 1px;
transition: none;
border-radius: 2px;
}
.qib-container div.quantity {
margin: 0;
padding: 0;
border: none;
width: auto;
}
.qib-container .quantity input.qty {
line-height: 1.2;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 45px;
min-height: unset;
min-width: unset;
box-shadow: none;
font-size: 15px;
border-style: solid;
border-color: #cac9c9;
border-width: 1px;
border-radius: 2px;
text-align: center
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.qib-container {
display: flex;
}
.qib-container > *:not(:last-child),
.input-text.qty {
margin-right: 5px;
}
Cela est dû au formatage du code. Les sauts de ligne entraînent un petit espacement entre les éléments rendus. Ex: ajoutez un saut de ligne après le bouton "-".
Remarque: les sauts de ligne consécutifs n'entraînent pas d'espacement supplémentaire.
<div class="qib-container"> <button type="button" class="minus qib-button">-</button> <div class="quantity"> <label class="screen-reader-text" for="quantity_5d33c50739412">Stainless steel standoff - satin finish quantity</label> <input type="number" id="quantity_5d33c50739412" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric"></div> <button type="button" class="plus qib-button">+</button></div>
.qib-button {
line-height: 1.2;
display: inline-block;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 30px;
color: #000;
background: #e2e2e2;
border-color: #cac9c9;
vertical-align: top;
font-size: 16px;
letter-spacing: 0;
border-style: solid;
border-width: 1px;
transition: none;
border-radius: 2px;
}
.qib-container div.quantity {
float: none;
display: inline-block;
margin: 0;
padding: 0;
border: none;
width: auto;
}
.qib-container .quantity input.qty {
line-height: 1.2;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 35px;
width: 45px;
min-height: unset;
min-width: unset;
box-shadow: none;
font-size: 15px;
border-style: solid;
border-color: #cac9c9;
border-width: 1px;
border-radius: 2px;
text-align: center
}
.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
il n'y a donc pas de problème avec vos styles ni avec la valeur de inline-block .
Le problème est juste WHITESPACE dans votre html.
Votre balisage présente le WHITESPACE
Vérifiez l'image ci-dessous
Merci pour les réponses à tous, elles sont correctes, m'ont aidé à résoudre le problème, mais il persiste toujours. J'étais conscient que les sauts de ligne se trouvaient derrière les espaces, mais étrangement, alors que mon fichier PHP Notepad ++ encodé en UTF8 (sans nomenclature) affiche CRLF après chaque ligne, sur le front-end, l'un d'eux disparaît simplement, ce qui entraîne ce que j'ai collé en tant que code HTML, avec le saut de ligne manquant. Cela n'est pas repris, c'est du HTML dans un fichier PHP. Une idée de pourquoi cela arriverait?
Il est apparu que la minification HTML du plugin Autoptimize a supprimé ce saut de ligne.