Modifier la taille d'un <br /> en CSS/HTML

[Fermé]
Signaler
Messages postés
2026
Date d'inscription
lundi 29 décembre 2008
Statut
Membre
Dernière intervention
20 mars 2011
-
 HeeBoo -
Bonjour,

Je cherche une petite astuce de webmaster :

Je souhaiterai savoir comment modifier la taille d'un "<br />" en CSS. Car l'espace créé par le br est trop grand donc je souhaiterai le diminué.

J'ai mis une "class" pour mon <br /> dans mon HTML

Quelle propriété utiliser ?


Merci à tous !

3 réponses

une petite astuce pour ça, il suffit d'activer "content" pour pouvoir modifier comme à notre guise la balise <br> :

br {
content: "";
display: block;
margin-bottom: 1em; // la taille de l'espace voulu en px, %, em, hv, pt, etc...
}


Cette astuce permet beaucoup d'autres choses, comme séparer d'une ligne, image ou autre élément les parties du texte entre la balise <br>, casser des "float", etc...
10
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42584 internautes nous ont dit merci ce mois-ci

Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
mets tes <img/> et <span> dans des <p> en séparant ce doit l'être.
tu donnes des identifiants à tes <p> et tu les présentes chacun comme tu veux.
Messages postés
2026
Date d'inscription
lundi 29 décembre 2008
Statut
Membre
Dernière intervention
20 mars 2011
118
OK merci beaucoup, je vais tester ça !
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

mieux vaudrait ajouter du {padding} à la balise contenant le texte, au besoin en ajoutant un <span>.
Messages postés
2026
Date d'inscription
lundi 29 décembre 2008
Statut
Membre
Dernière intervention
20 mars 2011
118
Un padding ????

Ce ne serai pas plutôt un margin dans cette situation ?

Merci de ta réponse, je vais tester !
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914 >
Messages postés
2026
Date d'inscription
lundi 29 décembre 2008
Statut
Membre
Dernière intervention
20 mars 2011

Ce ne serai pas plutôt un margin dans cette situation ?
pourquoi pas, ça dépend du contexte.
mais c'est le même rendu !
Messages postés
2026
Date d'inscription
lundi 29 décembre 2008
Statut
Membre
Dernière intervention
20 mars 2011
118 >
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016

Non rien ne marche, ni padding, ni margin :

code PHP

echo'
         <img src="images/icon/PNG-24/Profile.png" alt="profil"/>  <span id="nom_membre"><a href="./voirprofil.php?m='.intval($_SESSION['id']).'&amp;action=consulter"> 
        '.stripslashes(htmlspecialchars($_SESSION['pseudo'])).'</a></span> <span class="liens"><a href ="./deconnexion.php"> <img src="images/icon/PNG-24/exit.png" alt="deconnexion" width=18px id="deconnexion"></a><br class="br_espaces"/>
        <img src="images/editer.gif" alt="editer"/><a href="./voirprofil.php?action=modifier">
        Modifier mon profil</a><br />
        <img src="images/icon2/transparent/gif/24x24/message.gif" alt="message" width=18px /> <a href="./messagesprives.php">  Nouveau(x) message(s)</a></span><br />';



Code CSS:

#membre_et_connexion
{
-moz-border-radius: 8px;
background-image: url("images/degrade_connexion.gif");
border: solid 2px #b9454d;
position: absolute;
top: 15px;
right: 10px;
padding: 8px;
padding-top: 2px;
padding-top:6px;
}
#nom_membre a
{
text-decoration: none;
color: #bf3600;
font-size: 1.04em;
margin-bottom : 5px;
}

#membre_et_connexion .liens a
{
font-size: 0.7em;
color: #686868;
text-decoration: none;
}
#membre_et_connexion .liens a:hover
{
text-decoration: none;
color: #000000;
}
#nom_membre
{
color: #dc783e ;
font-weight: bold;
font-family: "trebuchet MS";
font-size: 1.1em;
text-decoration: none;
margin-bottom : 5px;
}
#nom_membre a:hover
{
text-decoration: none;
color: #d86e42;