Bonjour à vous , j'étais entrain de suivre le cours HTML5/CSS , et dans le chapitre intitulé "TP création d'un site pas à pas " , je voulais reproduire le code css d'une id , le code sur la page étant :

header h1

{

    font-family: 'BallparkWeiner', serif;

    font-size: 2.5em;

    font-weight: normal;

    margin: 0 0 0 10px;

}

le probléme c'est que en remplaçant la propriété margin par margin-left: 10px ( pour faire court); j'ai eu un résultat different , pourrais je savoir pourquoi? . merci 

-
Edité par TfkFreedom 22 juillet 2017 à 12:32:03

c'est normal car h1 a ses propres propriétés de base. si tu mets margin-left, tu ne modifies que celle-ci alors qu'avec margin:0 0 0 10px tu modifies les 4 proriétés de base à savoir : top:0, right:0, bottom:0 et left 10px

Voilà pourquoi tu n'as pas le même comportement

merci mais j'aimerai plus d'explication si c'est possible , du moment que top, right et bottom ont tous 0 comme valeur , si je modifie seulement le left ça ne serait pas la méme chose ? et qu'entendez vous dire par 'h1 a ses propres propriétés de base', merci encore et désolé pour le dérangement

Bonjour,

Le problème vient d'ailleurs, il faudrait voir le code, et expliciter le "pour faire court";
et tu parles du code d'une id, quelle id ? on ne voit pas d'id dans ton morceau de css

oui c'est vrai j'ai fait une erreur pas d'id , voici le lien pour le chapitre qui contient le code html + css

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/tp-creation-d-un-site-pas-a-pas

merci pour votre aide 

Ce que @stefde3 veut dire, c'est que les éléments ont, de base, des propriétés CSS appliquées par le navigateur. Les titres (donc h1) ont des marges par défaut, que tu annules en utilisant margin. Mais en utilisant margin-left, les marges hautes et basses restent.

Utilise les outils de développement de ton navigateur, ils t'indiquent tout ça très bien. Pour voir un élément, clic droit dessus et "inspecter".

-
Edité par EmmanuelBeziat 22 juillet 2017 à 12:54:57

Ce que je veux dire c'est par des propriétés de base c'est que si tu mets juste <h1></h1> dans ton code html, cette balise a par défaut le css suivant : margin-top:10px, margin-right:10px, margin-bottom:10px et margin-left:10px.

en gros ça donne ça de base :

Si tu mets un margin-left:10px, étant donné qu'il y a déjà un margin-left de 10px ça modifie rien. donc le margin-top, right et bottom ne change pas puisque tu modifie ici que le left.

En revanche avec margin:0 0 0 10px, tu lui indique donc que  top = 0px, right = 0px, bottom = 0px et left = 10px. Ce qui donnera ça : 

à savoir aucune marge en haut ni à droite ni en bas mais une marge à gauche de 10 px

très bien expliqué , merci beaucoup , je savais rien à propos de ces valeurs par default

Le CSS par défaut de h1, c'est margin: .67em 0; pas 10px mais l'idée est là.

oui enfin c'était pour lui faire comprendre comme pour les ul qui ont un margin-left de 40px etc etc quoi par défaut

désolé de vous déranger encore une fois mais dans le code css du chapite , y a écrit 

nav ul

{

    display: flex;

    list-style-type: none;

}

nav li

{

    margin-right: 15px;

}

nav a

{

    font-size: 1.3em;

    color: #181818;

    padding-bottom: 3px;

    text-decoration: none;

}

nav a:hover 

{

    color: #760001;

    border-bottom: 3px solid #760001;

}

pourquoi nav a et non nav li , du moment que les liens sont intégré dans les <li> :

<nav>

<ul>

<li><a href="#">ACCUEIL</a></li>

<li><a href="#">BLOG</a></li>

<li><a href="#">CV</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</nav>

afin d'avoir ce résultat là 

//user.oc-static.com/thb/344001_345000/344140.png

merci encore

-
Edité par TfkFreedom 22 juillet 2017 à 14:59:45

parce qu'il faut intégrer en css les enfants à savoir 

nav {

}

nav ul {

}

nav ul li {

}

/* Et enfin : */

nav ul li a {

}

/* et : */

nav ul li a:hover, nav ul li a:focus {

}

etc etc...

le a doit se trouver dans le ul li pour qu'il soit validé en css.

en gros :

nav ul a {

}

pas bon si y a des li dedans  et 

nav ul li a {

}

correct.

non ça je sais , je voulais savoir pourquoi quand je remplace le a par li , les mots ( accueil, blog ...) deviennent soulignés ?? alors que quand on met a ils ne sont pas soulignés ?. merci encore pour votre aide précieuse

bon j'ai trouvé la réponse , apparemment les liens sont ''automatiquement" soulignés et il faut mettre text-decoration:none; pour régler ça et enlever le soulignement , merci comme méme  

-
Edité par TfkFreedom 22 juillet 2017 à 15:47:16

Parce que la propriété text-decoration n'est pas héritable. Elle s'applique sur l'élément lui-même, pas les éléments enfants. Donc si tu cibles le <li>, tu ne cibles pas le <a> qu'il contient.

voila , c'est ça ce qui m'a échappé , donc il faut cibler directement les liens afin d'enlever le soulignement , merci encore pour votre aide précieuse