28172 sujets

CSS et mise en forme, CSS3

La propriété margin

Je suis en train de me pratiquer pour être un pro des languages HTML et CSS mais là il y a une chose qui cloche je comprend pas comment fonctionne la propriété margin qui est fait pour délimiter les marges extérieurs mais je comprend pas pourquoi mon code ne fonctionne pas

Le code html
<!doctype html>
<html>
<head>
<title> Apprendre le HTML et le CSS </title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div>
<a href="bienvenue.html"> Lien </a>
</div>
</body>
</html>
Le code css
div {
background-color: #e8f2a5;
display: block;
}
a {
background-color: #b9c2f4;
color: red;
text-decoration: none;
font-size: 70px;
border: 5px dashed orange;
padding: 50px;
margin-left: 60px;
}
Je sais mon code est laid mais je comprend pas comment fonctionnent margin-top margin-right et margin-bottom ça marche avec margin-left mais pas avec les autres je comprend pas je ne vois pas de décalage par rapport à la bordure de la page web
Modérateur
Bonjour,

Quand on utilise des margin sur des éléments html de type inline, le résultat peut surprendre.

Ajoute display:inline-block à l'élément a dans ta feuille de style, et ça devrait te permettre de voir les margin comme tu l'attends.

Amicalement,
Bonjour,

Le principe est assez simple général si je ne me trompe pas :
- les marges horizontales margin-right margin-left sont toujours interprétées, que l'élément (sur lequel elles sont appliquées) soit de type inline ou block.
Elles ne fusionnent pas entre elles.
- les marges verticales margin-top margin-bottom sont interprétées, si l'élément est de type block, et elles fusionnent entre ellles

La balise A est de type inline, si tu mets display:inline-block son type devient block
La balise DIV est de type block, si tu mets display:inline son type devient inline
Modifié par aliasdmc (17 Dec 2017 - 13:22)
Sujet clos
Aller à