[Résolu] Div ou p côte à côte (et histoire de bordures...)

Bonjour,

Après lecture des articles sur le positionnement, j'aimerais comprendre deux points sur la disposition côte à côte de deux paragraphes <p>.

1°) Premier problème : je souhaite disposer deux textes l'un à côté de l'autre avec un float

<p style="width:100px;height:50px;float:left;">texte premier</p>
<p style="width:100px;height:50px;margin-left:102px;">texte second</p>

Mais du coup le deuxième paragraphe se trouve à côté du premier mais décalé légèrement au-dessus (ce qui ne serait pas le cas avec des div, à titre d'illustration).
Pourquoi cela ? Comment corriger ce souci ? Ceci est mon premier problème.


2°) Second problème : en faisant un test avec des bordures, ces dernières semblent avoir une influence sur le comportement des éléments

Les textes ne sont pas calés :
<div style="height:50px;width:250px;">
<p style="width:100px;height:50px;float:left;">texte premier</p>
<p style="width:100px;height:50px;margin-left:102px;">texte second</p>
</div>

Avec les bordures les textes sont calés :
<div style="height:50px;width:250px;border:1px;border-style:solid;border-color:transparent;">
<p style="width:100px;height:50px;float:left;">texte premier</p>
<p style="width:100px;height:50px;margin-left:102px;">texte second</p>
</div>

Je pensais que les bordures avaient une valeur purement décorative... mais visiblement elles agissent comme un élément permettant de caler mes <p>. Est-ce que je me trompe ?

Merci de votre aide.


EDIT : suite aux critiques justifiées, je me suis permis de synthétiser ce post initial, pour le rendre un peu moins imprécis et tordu.
Modifié par Le_dragon (01 Nov 2013 - 11:28)

Je pense que tu devrais jeter un œil pour apprendre à différencier le positionnement des éléments dans le flux (particulièrement ceux qui sont de type inline et block) car là, tu mélanges bcp de choses:

http://www.alsacreations.com/tuto/lire/530-structure-balises-css-display-bloc-block-ligne-inline.html

Bonsoir,

Tu rencontres un cas de fusion de marges : http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

C'est un phénomène assez complexe à expliquer si tu débutes. En clair : les paragraphes ont par défaut des marges externes. Dans certain cas, elles fusionnent avec leur parent, dans d'autres cas non.

La solution la plus simple est de supprimer les marges hautes des paragraphes :

p {margin-top: 0;}

Pour répondre à ta 2è question : les bordures sont loin d'être anodines, elles comptent dans le calcul de la taille d'une boîte, à l'instar de width et des padding.

salut,
même si le sujet semble résolu, je voudrais rajouter que si tu débutes, prends bien le temps de tout comprendre avant d'essayer de raisonner parce que très franchement, ta logique fait peur (et il n'y a vraiment rien de méchant dans ce que je dis).
Tu devrais voir ou revoir les notions de base sur le positionnement en CSS et bien connaître les contraintes avec lesquelles tu débutes un code.
Perso, si tu es vraiment débutant, tu devrais éviter les flottants avant de bien les maîtriser et plutôt passer par un "display:inline-block"