Différence entre Margin avec 4 paramètres et margin-top, margin-right, margin-bottom, margin-left

**ProgElecT** · 18/08/2018, 16h11

Salut

Pour nettoyer un code, je me suis dit que je pourrais utiliser margin avec 4 paramètres plutôt que margin-top, margin-right, margin-bottom, margin-left que j'avais finit par utiliser.

Ben ... le résultat n'est pas le même, donc je n'ai sûrement pas compris l'utilisation de margin avec 4 paramètres.

Mes essais ont été fait sous les versions les plus ressentes de FireFox, Opera, IE, Safari, Chrome et Edge.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<style>
                *{
                        margin:0 0 0 0;
                        padding:0 0 0 0;
                }
                .divfond{
                        background-color: LightGray;
                        padding-top: 5px;
                        padding-right: 5px;
                        padding-bottom: 5px;
                        padding-left: 5px;
                }
                .stylecommun{
                        display: block;
                        width:100px;
                        height:100px;
                }
                .stylemargin1{
                        background-color: red;
                        margin-top: 5px;
                        margin-right: auto;
                        margin-bottom:5px;
                        margin-left: auto;
                }
                .stylemargin2{
                        background-color: green;
                        /* margin avec quatre valeurs, la première s'appliquera en haut(top), la deuxième à droite(right), la troisième en bas(bottom) et la quatrième à gauche(left) */
                        margin 5px auto 5px auto;
                        }
                </style>
	</head>
	<body>
		<div class="divfond">
			<img class="stylecommun stylemargin1">
		</div>
		<br />
		<div class="divfond">
			<img class="stylecommun stylemargin2">
		</div>
	</body>
</html>

Si quelque un peut m'expliquer, car je dois agire sur certains padding dans le même sens.
Par avance, merci.

**psychadelic** · 18/08/2018, 16h26

Non, le margin "groupé marche pareillement que "dégroupé".
faut juste écrire du code css respectant les règles de syntaxe.

margin 5px auto 5px auto; ligne 32. il manque le : => margin: 5px auto 5px auto; .

Si ton code produit un effet inattendu ou erroné, c'est que tu a fait une boulette quelque part. Les chances que ce soit celle d'une erreur de l'interpréteur du navigateur sont tres faibles, et celles qu'il y ait une règle cachée dans le W3C qui contredirait ce que trouve dans les doc habituelles est encore plus improbable.

mon conseil, utilise le Debugger de ton navigateur, ça permet d'éviter de poster des questions d'étourderie, et tu aurai tout de suite compris ton erreur.

**ProgElecT** · 18/08/2018, 17h04

Re

Merci

C'est

, cela fait plus d'un mois, que périodiquement je reviens sur se problème qui n'en est pas, des fois on ne voie pas la poutre que l'on a dans l’œil.

Invité · 18/08/2018, 18h27

Bonjour,

il faut aussi consulter la DOC (et les tutos) de temps en temps : ça ne fait pas de mal, et on gagne du temps...

Moyen mnémotechnique :

on part de midi,
on tourne dans le sens des aiguilles d'une montre
on obtient : top right bottom left

Avec quatre valeurs :

la première s'appliquera en haut,
la deuxième à droite,
la troisième en bas
et la quatrième à gauche

(ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).

N.B. Pour le border-radius : (ce n'est pas très clair dans le tuto)

top-left top-right bottom-right bottom-left

(c'est plus clair dans la doc MDN)
/* 1. coin en haut à gauche */
/* 2. coin en haut à droite */
/* 3. coin en bas à droite */
/* 4. coin en bas à gauche */

**ProgElecT** · 18/08/2018, 21h20

Re

Envoyé par jreaux62

Bonjour,
il faut aussi consulter la DOC (et les tutos) de temps en temps : ça ne fait pas de mal, et on gagne du temps...

Oui je sais bien, je ne post pas souvent, mais une fois sur deux ce n'est pas de ne pas avoir lut et relut des tutos ou des exemples, c'est que je ne vois pas la faute de syntaxe, pourtant si évidente quand on me l'a corrigée.

J'ai à nouveau vérifié avec le débogueur (F12 du navigateur) mais, sous FireFox il ne signale pas une erreur de syntaxe.

Étant persuadé que cela n'était pas une erreur de syntaxe mais une erreur d'utilisation, à aucun moment je n'ai pensé à passer par un validateur de code, d’habitude je passe par Service de validation CSS du W3C ,qui lui m'aurai signalé le problème.

Merci à chacun de s'être impliqué pour m'informer.

**psychadelic** · 18/08/2018, 23h49

Envoyé par ProgElecT

Re
J'ai à nouveau vérifié avec le débogueur (F12 du navigateur) mais, sous FireFox il ne signale pas une erreur de syntaxe..

Dans le cas présent, effectivement le debogueur de FF ne donne rien, il faut regarder ce qui se passe dans l'inspecteur et vérifier quelles Règles CSS sont appliquées sur l'élément en question, et la tu découvrira que ta regle css est manquante.

Sinon, j'utilise Visual Studio code, et lui souligne directement les erreur de codding, que ce soit du css ou du JS, ou du HTML, et bien d'autres langages.

Visual Studio code permet aussi de faire du debugging actif sur un navigateur en "action", c'est plus simple et plus complet à l'usage que d'en passer par celui du navigateur.

Différence entre Margin avec 4 paramètres et margin-top, margin-right, margin-bottom, margin-left

CSS

Vue hybride

Discussions similaires

Partager

Partager