AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  ConnexionConnexion  
-46%
Le deal à ne pas rater :
Oceanic OCEAB120W Batteur électrique – Blanc
7.51 € 13.91 €
Voir le deal

[Résolu] Probleme CSS - Margin non souhaité !

[Résolu] Probleme CSS - Margin non souhaité !  posté le :
Yop !
Woila je suis en train de faire des ptits tests et je tombe direct sur une colle.
Voici le code suspect et ses méfaits !

Code:
<style type="text/css">
.container {
 width: 500px;
 height: 200px;
 background: #CCC;
}
.bulle {
 width: 200px;
 margin: 40px auto;
 padding: 20px;

 background: #FFF;
}
</style>
<div class="container">
 <div class="bulle">
 Salut toi comment vas-tu ?
 </div>
</div>

Ce qui donne :

Salut toi comment vas-tu ?


Le margin est appliqué sur .container et non sur .bulle et je ne sais absolument pas pourquoi :/
Et grâce à Pyphi on a remarqué que si on rajoutait une bordure, le probleme se réglait.

Saurez vous trouver l'erreur ? A vous de jouer ;D
Hisakki
Hisakki
Codeur UltrActif
Messages : 150
Coda'Points : 798
Date d'inscription : 10/02/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue2/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (2/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Aahhhh Hisakki de retour !

Je m'occupe de ton probleme demain soir, une fois la rentrée passée !
Eluknow
Eluknow
Administrateur
Messages : 2200
Coda'Points : 3917
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue3/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (3/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Eheh ~ Re l'ami ! :3
Je suis impatient de voir comment tu vas résoudre ce problème ^.^
Sur ce je te souhaite une bonne rentrée pour demain Wink
Hisakki
Hisakki
Codeur UltrActif
Messages : 150
Coda'Points : 798
Date d'inscription : 10/02/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue2/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (2/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Coucou Smile

Bon, je cherche, je cherche, mais je t'avoue qu'effectivement, c'est bizarre. Pour l'instant, peut être une piste, mais je suis pas au bout de mes recherches !
Eluknow
Eluknow
Administrateur
Messages : 2200
Coda'Points : 3917
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue3/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (3/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Fufu quelque par ça me réconforte de savoir que pour toi aussi c'est pas normal x3
Impatient de voir le bout de tes recherches fufu ~
Hisakki
Hisakki
Codeur UltrActif
Messages : 150
Coda'Points : 798
Date d'inscription : 10/02/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue2/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (2/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
En fait, si c'est normal :p.

Regarde de nouveau ton premier post dans ce sujet : problème résolu, et sans bordure :p.
Je t'explique ? Wink
Eluknow
Eluknow
Administrateur
Messages : 2200
Coda'Points : 3917
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue3/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (3/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Ouaip je ne dis pas non pour une tite explication ;3
Ca pourra toujours être intéressant pour les personnes qui pourraient avoir ce "problème".

En tout cas GG a toi ;3
Hisakki
Hisakki
Codeur UltrActif
Messages : 150
Coda'Points : 798
Date d'inscription : 10/02/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue2/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (2/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Qu'est-ce que t'as changé pour que ce soit comme ça ? 0w0
pyphilia
pyphilia
Codeur VeryActif
Messages : 34
Coda'Points : 61
Date d'inscription : 01/09/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue0/0[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (0/0)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Coucou Wink

En fait, c'est ce qu'on appelle une fusion de marge.
La façon de régler cela est soit :
-de mettre une bordure sur l'élément enfant
-de mettre un padding vertical sur l'élément parent
-de mettre en inline-block l'élément parent

Voici le lien officiel concernant les fusions de marge :
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Voilà donc tout le soucis !

Eluknow
Eluknow
Administrateur
Messages : 2200
Coda'Points : 3917
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue3/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (3/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Merci bien pour l'explication des plus intéressantes :3
Hisakki
Hisakki
Codeur UltrActif
Messages : 150
Coda'Points : 798
Date d'inscription : 10/02/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue2/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (2/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Puis-je archiver ou je laisse quelques jours pour Pyphi' ?
Eluknow
Eluknow
Administrateur
Messages : 2200
Coda'Points : 3917
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue3/3[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (3/3)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Pas de souci j'ai lu merci ^^
pyphilia
pyphilia
Codeur VeryActif
Messages : 34
Coda'Points : 61
Date d'inscription : 01/09/2014

Niveau en programmation
HTML/CSS:
[Résolu] Probleme CSS - Margin non souhaité ! Left_bar_bleue0/0[Résolu] Probleme CSS - Margin non souhaité ! Empty_bar_bleue  (0/0)

[Résolu] Probleme CSS - Margin non souhaité ! Empty
Re: [Résolu] Probleme CSS - Margin non souhaité !  posté le :
Contenu sponsorisé


[Résolu] Probleme CSS - Margin non souhaité ! Empty
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum-
Sauter vers: