espacement entre paragraphes de textes

[JM66]

Bonjour,

Je suis designer avec de maigres connaissance en html et aimerais savoir comment régler mes espaces entre paragraphes.

Pour l'instant, j'ai remarqué que les balises <p><span> provoquaient un espacement "important", et que <span> annulait cet espace. C'est soit trop soit pas assez....

Les commandes
padding-bottom: 3px;
margin-bottom: 3px;

ne provoquent aucun résultat que je sépare les paragraphes avec <p> ou non. Je n'ai donc pas trouvé comment régler ces espaces entre paragraphes de façon paramétrée.

Qui peut m'aider?:zen:

 

[Niconemo]

les espaces entres les paragraphes se règle par le margin

par défaut (selon les navigateurs) ça doit être un truc du genre :

 margin: 1em 0;

C'est à dire :

margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;

Là où tu te plantes, c'est que tu ne compte que le margin-bottom et pas le margin-top.

Mais le mieux, c'est de réinitialiser sa feuille de style (de tout mettre à zéro) avant de la personnaliser.
comme ça on est à peu près certain que ça s'affichera pareil pour à peu près tous les navigateurs.

Il faut placer (ou charger) au tout début de ta feuille de style un reset de ce genre (on en trouve des plus pointus mais celui-là marche bien pour 99% des cas) :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
hr {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

Après tu peux bosser proprement.

 

[JM66]

OK merci. Sauf que ça "affecte" tout ce qui est géré en css pour le texte, y compris les menus en rollover avec javascript.

En revanche, le reste fonctionne, merci.:zen:

 

[Niconemo]

ça "affecte" tout ce qui est géré en css

C'est le principe même.

On remet toute la base à zéro et on mets ses propres valeurs. Ça fait gagner un temps fou.

Je sais que c'est douloureux la première fois, mais ça facilite vraiment la vie.
Si ça affecte des éléments mis en forme, c'est justement la preuve que leur mise en en forme est incomplète et subjective (elle se base sur les réglages de ton navigateur).

Enfin, tu n'est pas obligé d'utiliser un reset css. Ça me paraissait utile de signaler cette possibilité dans ce sujet vu que c'est justement une mise en forme par défaut qui te gênait.

 

[grumff]

Quand tu veux savoir ce qui provoque un espacement dans le navigateur, le mieux est d'inspecter l'élément avec les outils développeurs pour voir comment il est mis, et donc comment le régler. Pour ça tu vas dans les préférences de safari, avancées, et tu coches "Afficher le menu développement dans la barre des menus". Ça te donne également accès à la fonction "inspecter l'élément" quand tu fais un click droit sur ta page web. Tu verras toutes les propriétés css de l'élément sélectionné, qu'elles soient spécifiées ou que ce soit celles par défaut du navigateur, et en bas à gauche tu as également un schéma "dimensions" qui te permet de visualiser tous les margin/padding/... graphiquement.
Sous FireFox tu peux avoir la même chose avec le pluginfirebug, et sous Opera il me semble que c'est inclus nativement. Sous chrome c'est les mêmes outils que safari. Par contre si tu veux tester sous IE7, il va te faire de la merde, et t'auras aucun outil potable pour arranger les choses.
Avant de se plonger dans le développement, il faut d'abord apprendre à maîtriser les bons outils, ça permet de gagner beaucoup de temps.