Séparer deux blocks de texte inline

Bonsoir

J'ai deux blocs qui se suivent: sur la même ligne HTML

<h2>...</h2><p>...</p>

La raison de cette configuration est que, si les deux tiennent sur la même ligne ils soient côte à côte, et que s'ils ne tiennent pas sur la même ligne le <h2> soit au dessus du <p>.

Question: comment faire pour les styler de telle façon qu'il y ait un espace entre eux s'ils sont sur la même ligne, et pas de blanc à droite du premier ou à gauche du 2ème s'ils sont sur 2 lignes.

Pour l'instant, la seule façon que j'aie trouvée est de les mettre sur deux lignes différentes, mais je préférerais que ça marche aussi s'ils sont collés sur la même ligne.

Voici le CSS:

h2 {display:inline-table;}
p {display:inline-block;margin-left:0.25em;}

Le "margin-left" n'a aucun effet
J'ai essayé des :before sans succès.

Une idée?
Modifié par PapyJP (09 Mar 2016 - 19:54)

oui, flex ( http://codepen.io/anon/pen/VaaqYX )
ou inline-block ( http://codepen.io/anon/pen/BKKvNb )
et white-space dans les 2 cas

<div>
  <h2> un titre d'une longeur</h2>
  <p>un texte d'une certaine longueur mais court.</p>
</div>

div {
  display:flex;
  flex-wrap:wrap;
}
p {
  margin:auto 0 ;
}
h2 {
  margin-right:0.25em;
}
div>* {
  border:solid;
  white-space:nowrap; /* ?*/
}

et inline-block

h2, p {
 display:inline-block;
  white-space:nowrap; /* ?*/
  border:solid
}

Bonjour,

gcyrillus a écrit :
oui, flex ( http://codepen.io/anon/pen/VaaqYX )
ou inline-block ( http://codepen.io/anon/pen/BKKvNb )
et white-space dans les 2 cas

Je n'arrive pas à faire fonctionner ces exemples comme demandé dans la question initiale. Lorsque les textes s'affichent sur deux lignes, il reste un espace indésirable à droite de la première ligne (visible avec un texte très court dans la balise p et si on utilise par exemple margin-right:5em; pour le h2 et des backgrounds différents pour chaque élément html présent).

Le (seul?) moyen quand le h2 et le p sont sur la même ligne (dans le html) me semble être de rajouter (dans le html) un caractère "espace" entre eux. Lorsque les textes s'affichent sur deux lignes, les navigateurs suppriment ce caractère espace automatiquement. Évidemment, l'inconvénient, c'est qu'il faut toucher au html, et qu'il faut sans arrêt faire attention à bien conserver ce caractère espace.

On pourrait bien sûr aussi rajouter ce caractère avec du javascript.

Amicalement,

Merci de vous être penchés sur ce problème futile, car effectivement il suffit de mettre un espace entre les deux balises.
C'est tout de même surprenant qu'on ne parvienne pas à ajouter cet espace par CSS.
Pourquoi le padding-left n'a-t-il aucun effet ?