Comment puis-je supprimer l'espace entre les éléments inline-block?
Étant donné ce HTML et CSS:
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>En conséquence, il y aura un espace large de 4 pixels entre les éléments SPAN.
Démo:http://jsfiddle.net/dGHFV/
Je comprends pourquoi cela se produit et je sais aussi que je pourrais me débarrasser de cet espace en supprimant l'espace blanc entre les éléments SPAN du code source HTML, comme suit:
<p>
<span> Foo </span><span> Bar </span>
</p>
Cependant, j'espérais une solution CSS ne nécessitant pas de falsification du code source HTML.
Je sais comment résoudre cela avec JavaScript - en supprimant les nœuds de texte de l'élément conteneur (le paragraphe), comme suit:
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
Démo:http://jsfiddle.net/dGHFV/1/
Mais ce problème peut-il être résolu avec CSS seul?
Depuis que cette réponse est devenue assez populaire, je la réécris de manière significative.
N'oublions pas la question qui a été posée:
Comment supprimer l'espace entre éléments inline-block ? J'espérais une solution CSS ne nécessitant pas d'altération du code source HTML. Ce problème peut-il être résolu avec CSS seul?
Il est possible de résoudre ce problème avec CSS seul, mais il n’existe pas de correctif CSS complet .
La solution que j’avais dans ma réponse initiale consistait à ajouter font-size: 0 à l’élément parent, puis à déclarer un font-size sensible sur les enfants.
http://jsfiddle.net/thirtydot/dGHFV/1361/
Cela fonctionne dans les versions récentes de tous les navigateurs modernes. Cela fonctionne dans IE8. Cela ne fonctionne pas dans Safari 5, mais il fonctionne dans Safari 6. Safari 5 est presque un navigateur mort ( .33%, août 2015 ).
La plupart des problèmes liés aux tailles de police relatives ne sont pas compliqués à résoudre.
Cependant, bien que ce soit une solution raisonnable si vous avez spécifiquement besoin de corriger uniquement les CSS, ce n’est pas ce que je vous recommande si vous êtes libre de modifier votre code HTML (comme la plupart d’entre nous). .
En tant que développeur Web raisonnablement expérimenté, voici ce que je fais pour résoudre ce problème:
<p>
<span>Foo</span><span>Bar</span>
</p>
Oui c'est vrai. Je supprime les espaces dans le code HTML entre les éléments inline-block.
C'est facile. C'est simple. Ça marche partout. C'est la solution pragmatique.
Vous devez parfois examiner soigneusement la provenance des espaces. L'ajout d'un autre élément avec JavaScript ajoutera-t-il des espaces? Non, pas si vous le faites correctement.
Faisons un voyage magique de différentes manières pour supprimer les espaces, avec du nouveau code HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Vous pouvez le faire, comme je le fais habituellement:
<ul> <li>Item 1</li><li>Item 2</li><li>Item 3</li> </ul>Ou ca:
<ul> <li>Item 1</li ><li>Item 2</li ><li>Item 3</li> </ul>Ou utilisez les commentaires:
<ul> <li>Item 1</li><!-- --><li>Item 2</li><!-- --><li>Item 3</li> </ul>Ou, si vous utilisez PHP ou similaire:
<ul> <li>Item 1</li><? ?><li>Item 2</li><? ?><li>Item 3</li> </ul>Ou, vous pouvez même ignorer certains fermer complètement les balises (tous les navigateurs le permettent bien):
<ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul>
Maintenant que je vous ai ennuyé à mort avec "mille façons différentes de supprimer les espaces, par trentaine", nous espérons que vous avez tout oublié de font-size: 0.
Alternativement, vous pouvez maintenant utiliser flexbox pour réaliser de nombreuses dispositions que vous avez peut-être précédemment utilisées dans inline-block pour: https://css-tricks.com/snippets/css/a -guide-to-flexbox /
Pour les navigateurs conformes à CSS3, il existe white-space-collapsing:discard
voir: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
OK, bien que j’ai voté à la fois pour les réponses font-size: 0; et not implemented CSS3 feature, Après avoir essayé, j’ai découvert que aucun d’entre eux n’est une solution réelle.
En fait, il n’existe même pas une solution de contournement sans effets secondaires importants.
Puis j'ai décidé de supprimer les espaces (la réponse concerne cet argument) entre les divs inline-block de ma source HTML (JSP), En tournant ceci:
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
pour ça
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
c'est moche, mais ça marche.
Mais attendez une minute ... et si je génère mes divs dans Taglibs loops (Struts2, JSTL, etc ...)?
Par exemple:
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:Push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:Push>
</s:iterator>
</s:iterator>
Il n’est absolument pas pensable d’intégrer tout ce genre de choses, cela voudrait dire
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:Push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:Push></s:iterator>
</s:iterator>
ce n'est pas lisible, difficile à garder et à comprendre, etc ...
La solution que j'ai trouvée:
utilise les commentaires HTML pour connecter la fin d'une div au début de la suivante!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:Push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:Push><!--
--></s:iterator>
</s:iterator>
De cette façon, vous aurez un code lisible et correctement mis en retrait.
Et, comme effet secondaire positif, le HTML source, bien qu'infesté par des commentaires vides, Sera correctement mis en retrait;
prenons le premier exemple. À mon humble avis, ceci:
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
c'est mieux que ça:
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
Ajoutez commentaires entre les éléments pour ne PAS avoir d'espace blanc. Pour moi, il est plus facile que de remettre à zéro la taille de la police, puis de la rétablir.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
Toutes les techniques d'élimination de l'espace pour display:inline-block sont de vilains stratagèmes ...
Utiliser Flexbox
C'est génial, résout tout ce bs de disposition en bloc, et à partir de 2017, il a 98% de support du navigateur (plus si vous ne vous souciez pas des anciens IE).
C'est la même réponse que j'ai donnée à propos: Affichage: Bloc en ligne - Quel est cet espace?
Il existe en fait un moyen très simple de supprimer les espaces blancs des blocs en ligne, à la fois simples et sémantiques. Il s’agit d’une police personnalisée avec des espaces de largeur nulle qui vous permet de réduire les espaces (ajoutés par le navigateur pour les éléments insérés s’ils se trouvent sur des lignes séparées) au niveau de la police à l’aide d’une très petite police. Une fois que vous avez déclaré la police, il vous suffit de changer le font-family sur le conteneur et de revenir sur les enfants, et le tour est joué. Comme ça:
@font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Convenir au goût. Voici un téléchargement de la police que je viens de créer dans font-forge et convertie avec le générateur de police de caractères FontSquirrel. Ça m'a pris toutes les 5 minutes. La déclaration css @font-face est incluse: police zippée avec un espace de largeur nulle . Il se trouve dans Google Drive. Vous devez donc cliquer sur Fichier> Télécharger pour l’enregistrer sur votre ordinateur. Vous devrez probablement aussi changer les chemins des polices si vous copiez la déclaration dans votre fichier css principal.
Ajoutez display: flex; à l'élément parent. Voici la solution avec un préfixe:
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>Mettre à jour
Version simplifiée ????
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>Deux options supplémentaires basées sur CSS Text Module Level 3 (au lieu de white-space-collapsing:discard qui avait été supprimé du brouillon):
Word-spacing: -100%;
En théorie, il convient de faire exactement ce qui est nécessaire: raccourcir les espaces entre «mots» et 100% de la largeur des caractères d'espacement, c'est-à-dire jusqu'à zéro. Mais semble ne pas fonctionner nulle part, malheureusement, et ceci fonctionnalité est marquée «à risque» (elle peut également être supprimée de la spécification).
Word-spacing: -1ch;
Il raccourcit les espaces inter-mots de la largeur du chiffre '0'. Dans une police monospace, il doit correspondre exactement à la largeur du caractère espace (et de tout autre caractère également). Cela fonctionne dans Firefox 10+, Chrome 27+ et presque dans Internet Explorer 9+.
Malheureusement, c'est 2015 et white-space-collapse n'est toujours pas implémenté.
En attendant, donnez l'élément parent font-size: 0; et définissez le font-size sur les enfants. Cela devrait faire l'affaire
Utilisez flexbox et faites une solution de remplacement (à partir des suggestions ci-dessus) pour les anciens navigateurs
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Bien que, techniquement, pas une réponse à la question:
Vous pouvez essayer la solution flexbox et appliquer le code ci-dessous et l’espace sera supprimé.
p {
display: flex;
flex-direction: row;
}
Vous pouvez en apprendre plus à ce sujet sur ce lien: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
taille de police: 0; peut être un peu plus délicat à gérer ...
Je pense que les quelques lignes suivantes sont bien meilleures et plus réutilisables et permettent de gagner du temps par rapport à d’autres méthodes. Personnellement, j'utilise ceci:
.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}
/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}
Ensuite, vous pouvez l'utiliser comme suit ...
<ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Autant que je sache (je me trompe peut-être), mais tous les navigateurs prennent en charge cette méthode.
EXPLICATION:
Cela fonctionne (peut-être -3px peut-être mieux) exactement comme vous le supposeriez.
- vous copiez et collez le code (une fois)
- puis sur votre code HTML, utilisez simplement
class="items"sur le parent de chaque bloc en ligne.
Vous n'aurez PAS besoin de revenir au fichier css et d'ajouter une autre règle css pour vos nouveaux blocs en ligne.
Résoudre deux problèmes à la fois.
Notez également le > (plus grand que le signe), cela signifie que */tous les enfants doivent être inline-block.
REMARQUE: j'ai modifié pour permettre l'héritage d'espacement des lettres lorsqu'un wrapper a un wrapper enfant.
Simple:
item {
display: inline-block;
margin-right: -0.25em;
}
Il n'est pas nécessaire de toucher l'élément parent.
Seule condition ici: la taille de police de l'élément ne doit pas être définie (elle doit être égale à la taille de police du parent).
0.25em est le Word-spacing par défaut
Généralement, nous utilisons des éléments comme celui-ci dans différentes lignes, mais dans le cas où display:inline-block, l’utilisation de balises dans la même ligne supprimera l’espace, mais pas dans une autre ligne.
Un exemple avec des balises dans une autre ligne:
p span {
display: inline-block;
background: red;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>Exemple avec des balises dans la même ligne
p span {
display: inline-block;
background: red;
}<p>
<span> Foo </span><span> Bar </span>
</p>Une autre méthode efficace est un travail CSS qui utilise font-size:0 pour l'élément parent et donne font-size à un élément enfant autant que vous le souhaitez.
p {
font-size: 0;
}
p span {
display: inline-block;
background: red;
font-size: 14px;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>Les méthodes ci-dessus peuvent ne pas fonctionner quelque part en fonction de l'application dans son ensemble, mais la dernière méthode est une solution infaillible pour cette situation et peut être utilisée n'importe où.
Je ne suis pas sûr si vous voulez créer deux étendues bleues sans espace ou si vous souhaitez gérer d'autres espaces, mais si vous souhaitez supprimer cet espace
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
float: left;
}
Et fait.
J'ai eu ce problème maintenant et de font-size:0; j'ai trouvé que dans Internet Explorer 7 le problème demeure parce qu'Internet Explorer pense "Taille de police 0?!?!! WTF es-tu fou?" - Donc, dans mon cas, j'ai réinitialisé le CSS d'Eric Meyer et avec font-size:0.01em; j'ai une différence d'un pixel entre Internet Explorer 7 et Firefox 9, alors je pense que cela peut être une solution.
Je me suis attaqué à ce problème récemment et au lieu de définir le font-size:0 parent puis de redonner à l’enfant une valeur raisonnable, j’ai obtenu des résultats cohérents en définissant le conteneur parent letter-spacing:-.25em, puis l’enfant à letter-spacing:normal.
Dans un autre fil de discussion, un commentateur a mentionné que font-size:0 n’était pas toujours idéal, car les utilisateurs pouvaient contrôler la taille minimale des polices dans leur navigateur, annulant ainsi totalement la possibilité de définir la taille de la police sur zéro.
L'utilisation de ems semble fonctionner que la taille de police spécifiée soit 100%, 15 pt ou 36 pixels.
Je pense qu’il existe une méthode très simple/ancienne pour cela qui est supportée par tous les navigateurs même IE 6/7. Nous pourrions simplement définir letter-spacing sur une valeur négative élevée dans parent, puis le redéfinir sur normal au niveau des éléments enfants:
body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */
.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */<p style="color:red">Wrong (default spacing):</p>
<div class="">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
<hr/>
<p style="color:green">Correct (no-spacing):</p>
<div class="no-spacing">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>p {
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: red;
font-size: 30px;
color: white;
}<p>
<span> hello </span>
<span> world </span>
</p>Avec les crochets PHP:
ul li {
display: inline-block;
} <ul>
<li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li>
</ul>La réponse la plus simple à cette question est d'ajouter.
css
float: left;
lien codepen: http://jsfiddle.net/dGHFV/3560/
Je vais développer un peu la réponse de user5609829 car je pense que les autres solutions ici sont trop compliquées/trop de travail. L'application d'un margin-right: -4px aux éléments de bloc en ligne supprimera l'espacement et est prise en charge par tous les navigateurs. Voir le violon mis à jour ici . Pour ceux qui sont préoccupés par l’utilisation de marges négatives, essayez de donner this a read.
Ajoutez white-space: nowrap à l'élément conteneur:
CSS:
* {
box-sizing: border-box;
}
.row {
vertical-align: top;
white-space: nowrap;
}
.column{
float: left;
display: inline-block;
width: 50% // Or whatever in your case
}
HTML:
<div class="row">
<div class="column"> Some stuff</div>
<div class="column">Some other stuff</div>
</div>
Voici le Plunker .
La spécification CSS Text Level Level 4 définit une propriété text-space-collapse , qui permet de contrôler le traitement de l’espace dans et autour d’un élément.
Donc, en ce qui concerne votre exemple, il vous suffira d’écrire ceci:
p {
text-space-collapse: discard;
}
Malheureusement, aucun navigateur n'implémente encore cette propriété (à la date de septembre 2016), comme indiqué dans les commentaires relatifs à la réponse de HBP .
J'ai trouvé une solution CSS pure qui fonctionnait très bien pour tous les navigateurs:
span {
display: table-cell;
}
Utilisez l'une de ces astuces
- Supprimer les espaces
- Marge négative
- Ignorer la balise de fermeture (HTML5 ne s'en soucie pas quand même)
- Définissez la taille de la police sur zéro (Un espace dont la taille de police est zéro correspond à ... largeur à zéro)
- Utiliser la flexbox
Voir le code ci-dessous:
body {
font-family: sans-serif;
font-size: 16px;
}
ul {
list-style: none
}
li {
background: #000;
display: inline-block;
padding: 4px;
color: #fff;
}
ul.white-space-fix li {
margin-right: -4px;
}
ul.zero-size {
font-size: 0px;
}
ul.zero-size li {
font-size: 16px;
}
ul.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}original...
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Funky code formatting...
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Adding html comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
CSS margin-right: -4px;
<ul class="white-space-fix">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Omitting the </li>
<ul>
<li>one
<li>two
<li>three
</ul>
fixed with font-size: 0
<br><br>
<ul class="zero-size">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<br> flexbox
<br>
<ul class="flexbox">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>Chaque question qui tente de supprimer l’espace entre inline-blocks me semble être un <table> ...
Essayez quelque chose comme ça:
p {
display: table;
}
span {
width: 100px;
border: 1px solid silver; /* added for visualization only*/
display: table-cell;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>Juste pour le plaisir: une solution JavaScript facile.
document.querySelectorAll('.container').forEach(clear);
function clear(element) {
element.childNodes.forEach(check, element);
}
function check(item) {
if (item.nodeType === 3) this.removeChild(item);
}span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}<p class="container">
<span> Foo </span>
<span> Bar </span>
</p>Il existe de nombreuses solutions telles que font-size:0, Word-spacing, margin-left, letter-spacing et ainsi de suite.
Normalement, je préfère utiliser letter-spacing car
- il semble bien que nous assignions une valeur plus grande que la largeur d’espace supplémentaire (par exemple
-1em). - Cependant,
Word-spacingetmargin-leftne seront pas acceptables si nous définissons une valeur plus grande comme-1em. - Utiliser
font-sizen’est pas pratique lorsque nous essayons d’utiliseremcomme unitéfont-size.
Donc, letter-spacing semble être le meilleur choix.
Cependant, je dois vous avertir
lorsque vous utilisez letter-spacing, vous feriez mieux d'utiliser -0.3em ou -0.31em pas les autres.
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
cursor: auto;
}
.nav {
width: 260px;
height: 100px;
background-color: pink;
color: white;
font-size: 20px;
letter-spacing: -1em;
}
.nav__text {
width: 90px;
height: 40px;
box-sizing: border-box;
border: 1px solid black;
line-height: 40px;
background-color: yellowgreen;
text-align: center;
display: inline-block;
letter-spacing: normal;
}<nav class="nav">
<span class="nav__text">nav1</span>
<span class="nav__text">nav2</span>
<span class="nav__text">nav3</span>
</nav>Si vous utilisez Chrome (version de test 66.0.3359.139) ou Opera (version de test 53.0.2907.99), voici ce que vous voyez:
Si vous utilisez Firefox (60.0.2), IE10 ou Edge, vous constaterez peut-être que:
C'est intéressant. Donc, j'ai vérifié le mdn-letter-spacing et trouvé ceci:
longueur
Spécifie un espace supplémentaire entre les caractères en plus de l'espace par défaut entre les caractères. Les valeurs peuvent être négatives, mais il peut y avoir des limites spécifiques à la mise en œuvre. Les agents d'utilisateur ne peuvent pas augmenter ou diminuer davantage l'espace entre les caractères afin de justifier le texte.
Il semble que ce soit la raison.
Ajoutez letter-spacing:-4px; sur le parent p css et ajoutez letter-spacing:0px; à votre span css.
span {
display:inline-block;
width:100px;
background-color:palevioletred;
vertical-align:bottom;
letter-spacing:0px;
}
p {
letter-spacing:-4px;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>J'ai essayé la solution font-size: 0 à un problème similaire dans React et Sass pour un projet Free Code Camp sur lequel je travaille actuellement.
Et il fonctionne!
Tout d'abord, le script:
var ActionBox = React.createClass({
render: function() {
return(
<div id="actionBox">
</div>
);
},
});
var ApplicationGrid = React.createClass({
render: function() {
var row = [];
for(var j=0; j<30; j++){
for(var i=0; i<30; i++){
row.Push(<ActionBox />);
}
}
return(
<div id="applicationGrid">
{row}
</div>
);
},
});
var ButtonsAndGrid = React.createClass({
render: function() {
return(
<div>
<div id="buttonsDiv">
</div>
<ApplicationGrid />
</div>
);
},
});
var MyApp = React.createClass({
render: function() {
return(
<div id="mainDiv">
<h1> Game of Life! </h1>
<ButtonsAndGrid />
</div>
);
},
});
ReactDOM.render(
<MyApp />,
document.getElementById('GoL')
);
Ensuite, le Sass:
html, body
height: 100%
body
height: 100%
margin: 0
padding: 0
#mainDiv
width: 80%
height: 60%
margin: auto
padding-top: 5px
padding-bottom: 5px
background-color: DeepSkyBlue
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#buttonsDiv
width: 80%
height: 60%
margin: auto
margin-bottom: 0px
padding-top: 5px
padding-bottom: 0px
background-color: grey
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#applicationGrid
width: 65%
height: 50%
padding-top: 0px
margin: auto
font-size: 0
margin-top: 0px
padding-bottom: 5px
background-color: white
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#actionBox
width: 20px
height: 20PX
padding-top: 0px
display: inline-block
margin-top: 0px
padding-bottom: 0px
background-color: lightgrey
text-align: center
border: 2px solid grey
margin-bottom: 0px
span {
display:inline-block;
width:50px;
background:blue;
font-size:30px;
color:white;
text-align:center;
} </ code><p><span>Foo</span><span>Bar</span></p>Une autre façon que j'ai trouvée consiste à appliquer une marge négative comme valeur négative, à l'exception du premier élément de la ligne.
span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}