18043 sujets

Questions générales et questions de débutants

[résolu] Espace entre conteneur et fils

Bonjour, je suis un vrai débutant en ce qui concerne le .css etc

Je bute sur une incompréhension depuis plusieurs jours déjà (ne rigolez pas hein ^^)
J'essaye tout bêtement d'avoir un texte H2 avec son background plein, le tout souligné par un trait de quelques pixels.

Dans l'idée ça donnerai ça
http://img15.hostingpics.net/pics/665984Sanstitre2.jpg

Cela vous semble peut être simple à faire, mais pour le coup pour moi c'est un calvaire.
Il y a toujours un espace entre le texte et le trait, ou bien c'est le texte qui se rempli mais sur toute la longueur...

la formule est simple:

<div class="ma boite">
<h2>Mon texte au format H2</h2>
</div>


Merci d'avance pour tous conseils de votre part.
Modifié par poilozorey (20 Jan 2015 - 02:19)
Modérateur
Salut,

C'est le même soucis qu'on peut rencontrer avec une image inclue dans un conteneur. Une sombre histoire de line-height. Il faut passer la line-height du conteneur à 0 puis ne pas oublier de repasser celle du fils à 100% (defaut), surtout s'il y a du texte.

<div class="maboite">
<h2>Mon texte au format H2</h2>
</div>

.maboite{
    border-bottom: 2px solid red;
    padding:0;
    margin:0;
    line-height:0;
}
h2{
    display:inline;
    background:red;
    line-height:100%;
}
Modérateur
Par contre je me permet de rajouter un avis / remise en question. Je ne sais pas si c'est très bien d'avoir le div en parent puis passer un H2 en inline (qui est un bloc par défaut et qu'on contraint). Je ne sais pas s'il ne serait pas mieux d'avoir un DOM du genre :
<h2><span class="maboite">Mon texte au format H2<span></h2>

Et du coup le CSS :
h2{
    border-bottom: 2px solid red;
    padding:0;
    margin:0;
    line-height:0;
}
h2 span{
    background:red;
    line-height:100%;
}

Mais bon c'est du pinaillage... Si je peux avoir l'avis d'un éclairé du DOM pour confirmer ou infirmer mon hypothèse...

Bonne soirée ! Smiley smile
bonsoir, je viens de tester.

<div class="maboite">
<h2>Mon texte au format H2</h2>
</div>



.maboite{
    border-bottom: 2px solid red;
    padding:0;
    margin:0;
    line-height:0;
}
h2{
    display:inline;
    background:red;
    line-height:100%;
}


même de cette manière le carré (titre) dépasse le trait.
Et si on ajoute une taille de font ca empire les chose, peut être il y a t'il d’autres paramètres pour permettre de redescendre le trait ?
Modifié par poilozorey (19 Jan 2015 - 23:16)
Modérateur
Avec plaisir on est là pour ça !

Tu peux marquer [Résolu] dans le titre de ton sujet quand tu as la solution.
Un autre point important, choisi un titre un peu plus explicite que "Comment Faire ?", un titre en rapport avec ton problème (même si c'est pas toujours évident c'est toujours mieux !)du genre "Espace entre conteneur et fils".

Bonne soirée et bonne continuation ! Smiley smile
re bonjour, en rapport avec ton sujet (plus haut) sur la mise en pratique,dernière petite question.

Est-il bon, mauvais, de fonctionner comme cela ?

<div class="maboite">

<div class="maboite-h2">
<h2> Mon texte au format H2</h2>
</div>

<div class="les-liens"><h3><a href="*">Liens</a></h3></div>
<p class="texte-liens">texte des liens</p>

</div>

Modifié par poilozorey (20 Jan 2015 - 15:13)
bonsoir,

Pour le HTML:
Je ne suis personnellement pas convaincu de la nécessite d'envelopper les titres dans une div (neutre).

<h2><em> titre</em></h2>

ou
<h2><span>titre</span></h2>

... selon, se suffit.
Idem pour le:
<h3 class="lien-inside"><a href="#">lien</a></h3>


Pour le CSS et ton probleme d'espace initial, il y a 2 raisons qui le provoque:
1. Les titre et paragraphe ont une marge d'1em par defaut qui vont fusionner avec les éléments adjacent ou parent : voir: http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

2.les éléments en lignes se positionnent par défaut sur l'interligne (en CSS la règle par défaut est : 
vertical-align:baseline;

il reste sous la boite en ligne (img, input, ... ) ou le texte environ un espace de 0.2em de hauteur, espace nécessaire a afficher les jambage des lettres comme g,j,p,q,y . Un reset a top ou bottom et cet espace disparais: voir : http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align

Un codepen pour voir et jouer avec ton code : http://codepen.io/gc-nomade/pen/ogWqZb

Cdt,
Sujet clos
Aller à