Block Margin Issue

Le problème

<body>
  <div style="border: 1px solid green">
    <span style="border: 1px solid red; font-size: 12px;">Ceci est un texte</span>
  </div>
</body>

Initial Issue Initial Issue

Solutions

  • Utiliser display: flex à la place de display: block sur le container :
<body>
  <div style="border: 1px solid green; display: flex">
    <span style="border: 1px solid red; font-size: 12px">Ceci est un texte</span>
    <span style="border: 1px solid red; font-size: 8px">Ceci est un autre texte</span>
  </div>
</body>

Flex solution Flex solution

  • Paramétrer les propriétés font-size, letter-spacing et word-spacing du container à 0px et réinitialiser les enfants :
<body>
  <div style="border: 1px solid green; font-size: 0px; letter-spacing: 0px; word-spacing: 0px">
    <span style="all: initial; border: 1px solid red; font-size: 12px">Ceci est un texte</span>
    <span style="all: initial; border: 1px solid red; font-size: 8px">Ceci est un autre texte</span>
  </div>
</body>

Font-size solution Font-size solution

  • Utiliser la propriété float: left sur chaque enfant :
<body>
  <div style="border: 1px solid green">
    <span style="border: 1px solid red; float: left; font-size: 12px">Ceci est un texte</span>
    <span style="border: 1px solid red; float: left; font-size: 8px">Ceci est un autre texte</span>
  </div>
</body>

Float left solution Float left solution

Sources